美文网首页
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请求

    axios过滤拦截器ajax之前,需要了解axios的拦截器。这是官网的介绍 1.封装service对象// ex...

  • axios的配置

    一、axios 1、axios是对ajax请求的封装 2、ajax (1):Asynchronous Javasc...

  • react 发送ajax请求

    ajax请求 发送ajax请求的几种方式JQuery:一般不用,太重,不是专事专做axios: axios.get...

  • 六、Vue.js

    一、发送AJAX请求 1.简介 2,使用axios发送ajax请求 2.1安装axios并引入 2.1基本用法 3...

  • React中的“ajax”

    React没有ajax模块 集成其他的js库(如axios/fetch/jquery),发送ajax请求axios...

  • Vue项目集成Axios支持Restful调用

    Vue项目集成Axios支持Restful调用 Axios是前端Http请求工具,集成ajax请求,提供Promi...

  • Axios

    相当于ajax一、安装二、引入加载import axios from 'axios'三、将axios全局挂在到vu...

  • 【axios源码】封装ajax请求

    文本主要涉及到axios封装ajax请求的方法,首先从自己封装一个ajax请求会遇到的困难出发,然后看axios源...

  • vue全局使用axios发ajax请求

    首先,我们要通过 npm/Yarn 或一个 CDN 链接安装 axios。axios单文件使用例子:请求发送到 h...

  • JS async/await-ajax异步请求等待返回数据

    JS async/await-ajax异步请求等待返回数据 例子使用的是 axios 做ajax请求 在vue中使...

网友评论

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

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