vue手动取消请求的接口

最新推荐文章于 2024-06-19 08:44:24 发布

没有天赋的搬砖者

最新推荐文章于 2024-06-19 08:44:24 发布

阅读量730

点赞数

文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/sdad2154/article/details/128659914

版权

文章介绍了在实际项目开发中，如何通过在axios请求拦截器中添加全局存储的接口变量来优化路由切换时的接口加载问题。当切换页面或登录状态改变时，可以取消未完成的请求，防止错误提示并清理请求队列，提高用户体验。

摘要由CSDN通过智能技术生成

实际项目开发中我们会遇到登录系统之后项目会加载数据，但是有些庞大的项目接口非常繁琐在数据没有加载结束的时候切换页面会比较慢还有报错的提示这时候就需要用到优化

在请求拦截里增加全局存储接口的变量

import axios from 'axios';
import Vue from "vue";
import {Toast} from "vant";
Vue.use(Toast)
const service = axios.create({
    // timeout: 10000,
    headers: {
        'content-type': 'application/json'
    }
})
window._axiosPromiseArr = []
service.interceptors.request.use(
    config => {
        config.cancelToken = new axios.CancelToken(cancel => {

            window._axiosPromiseArr.push({ cancel })

        })
        return config
    },
    error => {
        console.log(error)
        return Promise.reject(error)
    }
);

然后在切换路由的时候

router.beforeEach((to, from, next) => {

  window._axiosPromiseArr.forEach((ele,index) => {

    ele.cancel() // 路由跳转之前，清空（终止）上一个页面正在请求的内容

// 清空请求的参数 清空请求的参数

    delete window._axiosPromiseArr[index]
    Toast.clear(); //这个是清除我们的提示信息
  })
  next();
})

以上是针对与路由跳转时我们的页面情况

当然我们也不可避免的会遇到 2个按钮切换时的接口请求

還有上述的情況接口沒有加載完畢的情況下推出登錄就會報很多提示的錯誤

     layout() {
            window._axiosPromiseArr.forEach((ele,index) => {

                ele.cancel() // 路由跳转之前，清空（终止）上一个页面正在请求的内容

// 清空请求的参数 清空请求的参数

                delete window._axiosPromiseArr[index]
                Toast.clear();
            })
        }