axios 模块化封装菜鸟教程对axios的二次封装的实现
Axios 是一个基于 promise 的 HTTP 库 ,使用了axios来进行数据的请求,一般都需要我们对它进行封装处理。
Axios封装
let service=axios.create({
baseURL:'',
timeout:5000,
headers:{
'content-type':'application/x-www-form-urlencoded'//转换为key=value的格式必须增加content-type
},
})
let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
//http-请求拦截
service.interceptors.request.use(
config => {
if (promiseArr[config.url]) {//发起请求时,取消掉当前正在进行的相同请求
promiseArr[config.url]('操作取消')
promiseArr[config.url] = cancel
}else{
promiseArr[config.url] = cancel
}
return config
},
error => {
return Promise.reject(err)
}
);
//http-响应拦截
service.interceptors.response.use(
response => {
if(response.data.code ==2){//返回code码为2的时候,代表登录失效
location.href="/login"
}
return response;
},
error => {
return Promise.reject(error)
}
)
export default {
get(url,param){//get请求
return new Promise((resolve,reject) => {
service({
method: 'get',
url,
params: param,
cancelToken: new CancelToken(c => { cancel = c })
}).then(res => {
resolve(res)
})
})
},
post(url,param){//post请求
return new Promise((resolve,reject) => {
service({
method: 'post',
url,
data: param,
cancelToken: new CancelToken(c => {cancel = c })
}).then(res => {
resolve(res)
})
})
}
}
在vue中使用:
在main.js文件下:
import {post,get} from './lib/http'//请求
//定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$get=get;
这样基本的功能就有了,然后在页面上使用this.$post、this.$get来调用。