简单的封装axios
程序员文章站
2022-04-19 19:37:43
...
简单的封装axios
现在项目中下载axios 跟qs模块
然后在src目录下创建一个api文件夹,里面创建一个index.js文件 代码如下:
import axios from "axios"
import qs from "qs"
import { Loading } from 'element-ui';
// 配置公共地址
axios.defaults.baseURL="";
// 请求超时时间
axios.defaults.timeout=5000;
// 公司用的是token的话可以加
// axios.defaults.headers.common['token']=token;
// 添加请求拦截器
var loadings;
axios.interceptors.request.use(function (config) {
// 每次ajax获取数据之前开启loading弹窗
loadings=Loading.service();
if(config.method.toLowerCase()=='post'){
config.data=qs.stringify(config.data)
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (config) {
// 对响应数据做点什么
loadings.close();
return config;
}, function (error) {
// 对响应错误做点什么
loadings.close();
return Promise.reject(error);
});
export default{
axios
}
然后在main.js中引入
然后在放到vue实例中
import ajaxs from "./api/index"
Vue.prototype.$http=ajaxs; //this.$http 执行ajax请求
如下图:
api/index.js
main.js
上一篇: 拉网线的学python:购物车程序
下一篇: lua项目模块化编程(一)