Vue学习笔记:axios 拦截器的用法
Vue学习笔记:axios 拦截器的用法什么是axios 拦截器?拦截器就是拦截每一次的请求和响应,然后进行相应的处理。请求拦截器,它可以统一在你发送请求前在请求体里加上token;响应拦截器,是在接受到响应之后进行的一些操作,比如,服务器返回登录状态失效,需要重新登录的时候,就给它跳到登录页面;创建拦截器const service = axios.create({baseURL: process
·
Vue学习笔记:axios 拦截器的用法
什么是axios 拦截器?
拦截器就是拦截每一次的请求和响应,然后进行相应的处理。请求拦截器,它可以统一在你发送请求前在请求体里加上token;响应拦截器,是在接受到响应之后进行的一些操作,比如,服务器返回登录状态失效,需要重新登录的时候,就给它跳到登录页面;
创建拦截器
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000 ,// request timeout
responseType: "json",
withCredentials: true, // 跨域请求是否要携带cookie
headers: {
'Content-Type': 'application-json/x-www-form-urlencoded;charset=utf-8',
}
})
请求拦截器
/** 添加请求拦截器 **/
service.interceptors.request.use(
config => {
if (localStorage.getItem('token') == null) {
// window.location.href = '/loginPage'
} else {
config.headers['token'] = localStorage.getItem('token')
}
return config
},
error => {
Message.error("操作失败!")
return Promise.reject(error)
}
)
响应拦截器
service.interceptors.response.use(
response => {
if(response.status === 200 && response.data.code == 30001){
Message.error(response.data.msg)
}else{
return Promise.resolve(response)
}
},
error => {
Message.error("操作失败!")
return Promise.resolve(error)
}
)
封装请求
1.在src下新建api.js
2.在api.js内封装好得拦截器js 导入 util.js
import request from '../utils/request';
import request from '../utils';
export function getlogout(query) { //登出
return request({
url: '/ict-login/login/logout',
method: 'post',
params: query,
})
}
使用
1.在组将中导入 api.js
import * as api from "@/api";
也可以单独将封装得请求导入
import { getlogout} from "@/api";
调用方式
api.getlogout({
userName: this.adminName,
})
.then((response) => {
})
.catch(() => {
});
END!!!
就如上封装,调用就封装好了axios拦截器得用法!
个人小记,欢迎指教!感谢阅读,欢迎关注点赞!!!
更多推荐
已为社区贡献9条内容
所有评论(0)