美文网首页
axios全局过滤器ajax请求

axios全局过滤器ajax请求

作者: JX灬君 | 来源:发表于2021-07-05 11:31 被阅读0次

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

    相关文章

      网友评论

          本文标题:axios全局过滤器ajax请求

          本文链接:https://www.haomeiwen.com/subject/oddiultx.html