Vue学习笔记：axios 拦截器的用法

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拦截器得用法！

个人小记，欢迎指教！感谢阅读，欢迎关注点赞！！！