Vue的axios封装
在vue项目中，经常需要封装axios，所以总结一下方法。
1、安装
使用 npm:
npm install axios
使用 bower:
bower install axios
使用 yarn:
yarn add axios
2、引入
在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。
// 在http.js中引入axios
import axios from 'axios' ; //axios的引入
import QS from 'qs' ; //引入qs模块
3、创建实例
通过timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。
//创建实例
const instance = axios.create({
timeout: 20000,
withCredentials: false,
});
4、设置请求拦截器
在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
5、最后抛出请求方式
//post请求
export const post = (url, data) => {
return instance.post(url, data);
};
//put请求
export const put = (url, data) => {
return instance.put(url, data);
};
//get请求
export const get = (url, data) => {
return instance.get(url, { params: data });
};
//delete请求
export const deleter = (url, data) => {
return instance.delete(url, { params: data });
};
//最后将抛出的请求引入请求引入对应的api.js中
import {...} from '@/http.js'
