vue3项目实战的请求接口问题（二）配置全局axios的nprogress顶部进度条

Dorable_Wander

已于 2023-03-29 01:13:57 修改

阅读量1k

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript 前端框架 typescript

于 2023-03-28 19:07:53 首次发布

本文链接：https://blog.csdn.net/XSL_HR/article/details/129820275

版权

Vue 专栏收录该内容

39 篇文章 52 订阅

订阅专栏

vue3项目实战的请求接口问题——配置全局axios的NProgress顶部进度条

知识回调
场景复现
利用NProgress和axios结合实现接口请求进度的实时反馈

知识回调

文章内容	文章链接
NProgress的使用（一）vue项目中使用NProgress	https://blog.csdn.net/XSL_HR/article/details/129820542?spm=1001.2014.3001.5501
vue3项目实战的请求接口问题（一）跨域问题+解决方法	https://blog.csdn.net/XSL_HR/article/details/127813674?spm=1001.2014.3001.5502

场景复现

无论是在后台管理系统的页面中，还是在其他网页中，拥有反馈页面加载进度的进度条已经是必要的了。在上期文章中，我们介绍了NProgress的基础用法，能在vue项目中引入与应用NProgress组件。不过在上期文章中，我们只是将NProgress与路由守卫相结合，本期文章将重点介绍如何将NProgress与axios请求相结合，实现页面请求进度的实时监听，增强交互体验。

具体需求：通过进度条实时反映接口请求的进度
解决方法：使用NProgress组件和axios请求

下面来进行代码的实战来实现上述需求👇👇👇

利用NProgress和axios结合实现接口请求进度的实时反馈

1.引入NProgress

首先，在使用NProgress之前，我们需要在相应的文件中引入NProgress。
我这里是在根目录src下的utils文件里创建了一个request.ts的文件，用于存放axios请求的部分。

在这里插入图片描述
源代码：

import axios from 'axios'
import { message, Modal } from 'ant-design-vue';
import NProgressE from 'nprogresse';
import 'nprogresse/style.css';

2.创建axios实例与超时设置

const request = axios.create({
    baseURL: '/store', // url = base url + request url
    timeout: 360000
    // withCredentials: true // send cookies when cross-domain requests
})

详细解释：

在这里使用了跨域处理（知识回调中可查看）
设置请求时间不超过360000毫秒

3.NProgress与request结合

源代码：

request.interceptors.request.use(
    (response) => {
        NProgressE.start()
        const satoken = localStorage.getItem('token')
        if (satoken !== '') {
            response.headers['token'] = satoken
        }
        return response
    },
    (error) => {
        NProgressE.error(true);
        Promise.reject(error)
    }
)

详细解释：

当请求开始时，调用start方法，开启进度条
将登录时请求接口返回的token值取出来，进行token的校验
如果校验成功，则进度条顺利加载到结束。如果请求失败或者校验不成功，都会导致进度条变成error状态，并返回错误提示

4.NProgress与response结合

源代码：

request.interceptors.response.use(
    (response) => {
        NProgressE.done(true)
        const res = response.data;
    if (res.code == 30007) {
        Modal.warning({
        title: '登录过期',
        content: '请重新登录',
        onOk() {
            localStorage.setItem('token', '')
            location.reload() // To prevent bugs from vue-router
            },
        });
    }
        return response
    },
    (error) => {
        NProgressE.error(true);
        message.error(error.message)
        return Promise.reject(error)
    }
)