axios 拦截器的用法
程序员文章站
2022-07-03 15:01:56
什么是拦截器拦截器就是拦截每一次的请求和响应,然后进行相应的处理。请求拦截器,它可以统一在你发送请求前在请求体里加上token;响应拦截器,是在接受到响应之后进行的一些操作,比如,服务器返回登录状态失效,需要重新登录的时候,就给它跳到登录页面;创建 axios 实例const Axios = axios.create({ baseURL: HOST, // 请求的域名 timeout: 10000000000, // 响应超时时间 responseType: "json",...
什么是拦截器
拦截器就是拦截每一次的请求和响应,然后进行相应的处理。请求拦截器,它可以统一在你发送请求前在请求体里加上token;响应拦截器,是在接受到响应之后进行的一些操作,比如,服务器返回登录状态失效,需要重新登录的时候,就给它跳到登录页面;
创建 axios 实例
const Axios = axios.create({
baseURL: HOST, // 请求的域名
timeout: 10000000000, // 响应超时时间
responseType: "json",
withCredentials: true, // 跨域请求是否要携带cookie
headers: {
'Content-Type': 'application-json/x-www-form-urlencoded;charset=utf-8',
}
});
请求拦截器
//在发送请求之前做的一些操作,例如加上token
Axios .interceptors.request.use( config => {
// 为请求头对象添加 token 验证的 Authorization 字段
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
}, error => {
//对请求错误做些什么
return Promise.reject(error)
})
响应拦截器
//接收到响应后要做些什么,比如跳转到登录页
Axios.interceptors.response.use(response => {
response => {
//拦截响应,做统一处理
if (response.data.code) {
switch (response.data.code) {
case 1002:
store.state.isLogin = false
router.replace({
path: 'login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
}
return response
}, error => {
//对响应错误做些什么
return Promise.reject(error)
})
对每个请求方式进行封装
export function requestGet(url, query) {
// 查
return Axios.get(url, { params: query || {} })
.then((res) => {
return Promise.resolve(res.data)
console.log(res.data);
})
}
export function requestPost(url, data) {
// 改
return Axios.post(url, data)
.then((res) => {
return Promise.resolve(res.data)
})
}
export function requestPut(url, data) {
// 增
return Axios.put(url, data)
.then((res) => {
return Promise.resolve(res.data)
})
}
export function requestDelete(url) {
// 删
return Axios.delete(url)
.then((res) => {
return Promise.resolve(res.data)
})
}
应用
最后把封装的实例在需要的地方导入就可以了。
本文地址:https://blog.csdn.net/sinat_33255495/article/details/107933556
上一篇: python的面向对象编程,类的理解
下一篇: 超高性价比WiFi蓝牙模块大合集