axios过滤拦截器ajax之前,需要了解axios的拦截器。
这是官网的介绍
拦截器
在请求或响应被then或catch处理前拦截它们
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
如果你想在稍后移除拦截器,可以这样:
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
可以为自定义 axios 实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
1.封装service对象
// export default 返回的是一个promise对象
// 新建service目录
// 新建index.js
import axios from "axios";
export default {
login(data) {
return axios.post("/api/login", data);
},
};
2.页面使用
import services from "../service";
services
.login({
CNO: this.cm_code,
PNO: this.PNO,
Passwd: this.Passwd,
})
.then((res) => {}
.catch((e) => {
})
3.配置拦截器
// 登录完成后的所有的请求必须在请求的headers中添加token
// 添加请求拦截器
let axiosIns = axios.interceptors.request.use(
function (config) {
let loginToken = sessionStorage.getItem("LoginToken");
if (loginToken) {
// 在发送请求之前做些什么
config.headers.Authorization = bearer ${sessionStorage.getItem( "LoginToken" )}
;
}
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
4.退出时移除拦截器
logout() {
// 当退出登录,取消全局注册的钩子
axios.interceptors.request.eject(axiosIns);
},
5.service代码如下
import axios from "axios";
// 登录完成后的所有的请求必须在请求的headers中添加token
// 添加请求拦截器
let axiosIns = axios.interceptors.request.use(
function (config) {
let loginToken = sessionStorage.getItem("LoginToken");
if (loginToken) {
// 在发送请求之前做些什么
config.headers.Authorization = `bearer ${sessionStorage.getItem(
"LoginToken"
)}`;
}
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
export default {
login(data) {
return axios.post("/api/login", data);
},
logout() {
// 当退出登录,取消全局注册的钩子
axios.interceptors.request.eject(axiosIns);
},
getUserProgress(data) {
return axios.get("/api/getUserProgress", data);
},
};
网友评论