axiox二次封装

最新推荐文章于 2024-07-31 15:18:24 发布

eliauk253

最新推荐文章于 2024-07-31 15:18:24 发布

阅读量118

点赞数

文章标签：前端 vscode

本文链接：https://blog.csdn.net/qq_59466538/article/details/122249009

版权

axios的二次封装

在src/utils/request.js中进行封装

//导入axios
import axios from 'axios';

//创建axios实例
var instance = axios.create();

//设置请求拦截器
instance.interceptors.request.use(function (config) {
    //1.自动携带token
    config.headers['Authorization'] = "Bearer " + localStorage.getItem("token");

    //2.显示loading动画

    return config;
}, function (error) {
    
    return Promise.reject(error);
});

//设置响应拦截器
instance.interceptors.response.use(function (response) {
    //如果 登陆成功, 并且携带token,就需要自动保存token
    if( response.status == 200 && response.data.token ){
        localStorage.setItem("token",response.data.token)
    }

    //隐藏loading动画

    return response;
}, function (error) {
    //隐藏loading动画

    //处理响应错误状态码
    if( error.response.status == 401 ){ 
        //身份验证失败,登陆过期
        //删除本地的token
        localStorage.removeItem("token");
        //弹出提示框
        alert("身份验证失败,登陆过期&#