1、简介
官方文档
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。简单来说就是前端最火最简单的一个http请求解决方案。
2、安装
npm install vuex --save
3、功能
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
4、代码封装
下面给出一份封装好的配置文件,更加详细的直接去官方文档查询即可。
(1)工具类封装
// 引入axiosimport axios from 'axios';// 创建axios实例const httpService = axios.create({ // url前缀-'https://some-domain.com/api/' baseURL: process.env.BASE_API, // 需自定义 // 请求超时时间 timeout: 3000 // 需自定义});// request拦截器httpService.interceptors.request.use( config => { // 根据条件加入token-安全携带 if (true) { // 需自定义 // 让每个请求携带token config.headers['User-Token'] = ''; } return config; }, error => { // 请求错误处理 Promise.reject(error); })// respone拦截器httpService.interceptors.response.use( response => { // 统一处理状态 const res = response.data; if (res.statuscode != 1) { // 需自定义 // 返回异常 return Promise.reject({ status: res.statuscode, message: res.message }); } else { return response.data; } }, // 处理处理 error => { if (error && error.response) { switch (error.response.status) { case 400: error.message = '错误请求'; break; case 401: error.message = '未授权,请重新登录'; break; case 403: error.message = '拒绝访问'; break; case 404: error.message = '请求错误,未找到该资源'; break; case 405: error.message = '请求方法未允许'; break; case 408: error.message = '请求超时'; break; case 500: error.message = '服务器端出错'; break; case 501: error.message = '网络未实现'; break; case 502: error.message = '网络错误'; break; case 503: error.message = '服务不可用'; break; case 504: error.message = '网络超时'; break; case 505: error.message = 'http版本不支持该请求'; break; default: error.message = `未知错误${error.response.status}`; } } else { error.message = "连接到服务器失败"; } return Promise.reject(error); })/*网络请求部分*//* * get请求 * url:请求地址 * params:参数 * */export function get(url, params = {}) { return new Promise((resolve, reject) => { httpService({ url: url, method: 'get', params: params }).then(response => { resolve(response); }).catch(error => { reject(error); }); });}/* * post请求 * url:请求地址 * params:参数 * */export function post(url, params = {}) { return new Promise((resolve, reject) => { httpService({ url: url, method: 'post', data: params }).then(response => { resolve(response); }).catch(error => { reject(error); }); });}/* * 文件上传 * url:请求地址 * params:参数 * */export function fileUpload(url, params = {}) { return new Promise((resolve, reject) => { httpService({ url: url, method: 'post', data: params, headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { resolve(response); }).catch(error => { reject(error); }); });}export default { get, post, fileUpload}
(2)使用
// 引入工具类-目录自定义import fetch from '@/util/fetch'// 使用const TMPURL = ''; // url地址const params = {}; // 参数fetch.post(TMPURL + '/login/login', params);