axios全局过滤器ajax请求

2021-07-05  本文已影响0人  JX灬君

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);
  },
};

上一篇下一篇

猜你喜欢

热点阅读