对于二次封装axios的实现_在二次封装axios请求时,添加loading蒙板-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_55002615/article/details/122136143

本文介绍了如何对axios进行二次封装，特别是在每次发送请求时添加loading动画效果，以提升用户体验。在请求拦截器中设置Authorization头，并在响应拦截器中处理loading的关闭及错误提示。这种做法确保了请求过程中有明确的反馈，同时增强了应用的交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


instance.interceptors.request.use(function (config) {
    
    config.headers.Authorization = "Bearer " + localStorage.getItem("token");
    
    loadingInstance = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    })

    return config;
}, function (error) {

    return Promise.reject(error);
});

以上是对于axios的二次封装的请求头，对于每个请求都会响应一个loading动画效果

这是对于请求数据，返回的一些错误的提示；

关于axios的二次封装的想法：

首先需要创建一个axios实例，然后添加发送请求的拦截器，在每次发送请求到服务器时显示一个loading动画，来证明你的请求正在执行中；其次添加响应拦截器，既然能发送请求给服务器，服务器就要返回给用户一个回应，再次设置影响关闭loading动画，并且证明你的请求成功，并将你的请求的账号信息保存到本地存储；然后在进行登录或者请求别的操作时，做了一些判断，假如你的请求发生错误，会返回给你一系列回应。也可以设置一些弹框提示配合使用，彰显页面的实用度……