vue 項目中切換頁面取消接口請求

前言: 在我們的項目中我們會遇到這種情況當我們切換頁面時接口請求依舊繼續，如果我們的有提示性的話語 ，在切換頁面是會覺得很突兀

第一步：

在我們封裝的axios請求里面  （我這個是移動端的H5頁面的項目，用的vant ui 的框架 ，標紅的部分就是我們操作的部分）

   

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)
    }
);

service.interceptors.response.use(
    response => {

        if (response.status === 200) {
            return response;
        } else {
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        // Toast.fail('網絡請求失敗')
        return Promise.reject();
    }
);

export default service;
第二步：在mian.js里面

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

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

    ele.cancel() // 路由跳轉之前，清空（終止）上一個頁面正在請求的內容

// 清空請求的參數 清空請求的參數

    delete window._axiosPromiseArr[index]
    Toast.clear(); //這個是清除我們的提示信息
  })
  next();
})
以上是針對與路由跳轉時我們的頁面情況
當然我們也不可避免的會遇到 2個按鈕切換時的接口請求
只需要在beforeDestroy函數里面寫入相應的方法即可

 //切換取消請求
        beforeDestroy() {
            window._axiosPromiseArr.forEach((ele,index) => {

                ele.cancel() // 路由跳轉之前，清空（終止）上一個頁面正在請求的內容

// 清空請求的參數 清空請求的參數

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