axios请求中断的几种方法

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

const service = axios.create({
  baseURL: process.env.VUE_APP_API, 
  timeout: 1800000 
})
    // 请求拦截
  service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 响应拦截
service.interceptors.response.use(
 
  response => {
    const res = response.data
  
    if (!res.status && response.status === 200) {
      return response
    }
    if (res.status !== '200') {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000,
        dangerouslyUseHTMLString: true
      })
      if (res.status === '401') {
      
        MessageBox.confirm('访问了未授权的资源或者登入状态已失效，你可以继续留在这个页面，或者重新登入', '是否重新登入', {
          confirmButtonText: '重新登入',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 清空Token，并且重新登入
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    if (error.response && error.response.status === 401) {
        MessageBox.confirm('提示', '是否重新登入', {
          confirmButtonText: '重新登入',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 清空Token，并且重新登入
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
      }
      return true
    } else if (error.response && error.response.status === 502) {
      Message({
        message: '502 系统正在重新发布中，请稍后再试',
        type: 'error',
        duration: 5 * 1000
      })
    } else if (error.response && error.response.status === 404) {
      Message({
        message: '404 系统正在重新发布中或请求不存在，请稍后再试',
        type: 'error',
        duration: 5 * 1000
      })
    } else {
      Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000,
        dangerouslyUseHTMLString: true
      })
    }
    return Promise.reject(error)
  }
)

// api.js
import request from '@/utils/request'
// 这是一个导出接口
export function export(data, cancelToken) {
  return request({
    url: '/order/order-export',
    method: 'post',
    responseType: 'blob',
    data,
    cancelToken
  })

<button @click='exportData'>导出</button>
<button @click='handleCancel'>取消</button>
import {export} from '@/api.js'
import axios from 'axios'
data() {
    return {
        request:null
    }
}

methods:{
// 导出
exportData() {
     const request = axios.CancelToken.source()
     this.request = request
     export({},request.token)
     .then(res => {})
     .catch((err) => {})
 },
 //取消
 handleCancel () {
  this.request.cancel('中断请求')
 }
}

// api.js
export function exportData(data) {
  return request({
    url: '/order/order-export',
    method: 'post',
    responseType: 'blob',
    data,
    signal: data.signal  // 新加的代码
  })
}
// 页面中使用
import {export} from '@/api.js'
import axios from 'axios'
let controller;

methods:{
// 导出
exportData() {
     controller = new AbortController()
      export({singal:controller.singal}).then(res => {
      
      console.log('下载成功')
      
      })
      .catch((err) => {
      if (axios.isCancel(err)) {
      console.log('下载被取消') 
      } else if (err.name === 'AbortError') {
      console.log('下载被中止') 
      } else {
          console.error(`下载错误：${err.message}`) 
         } 
      })
 },
 //取消
 handleCancel () {
  if (controller) { 
     controller.abort() // 使用 abort 方法中止下载 console.log('中止导出')
   }
 }
}

// 取消请求
export const abortRequest = (controller) => {
  if (controller) {
    controller.abort()
  }
}

// 请求拦截
service.interceptors.request.use(
  (config) => {
    if (config.abortController) {
      config.signal = config.abortController.signal
    }
    ...其他代码跟上面一样
    return config
    })

// api.js
export function download(data, abortController) {
  return request({
    url: '/order/order-download',
    method: 'POST',
    responseType: 'blob',
    data,
    abortController // 新加的代码
  })
}

export function exportData(data,abortController) {
  return request({
    url: '/order/order-export',
    method: 'post',
    responseType: 'blob',
    data,
    abortController  // 新加的代码
  })
}

<div>
    <button @click="fetchData1">发起请求 1</button>
    <button @click="abortDownload1">中止请求 1</button>
    <button @click="fetchData2">发起请求 2</button>
    <button @click="abortDownload2">中止请求 2</button>
  </div>
let controller1;
let controller2;
import {abortRequest} from '@/utils/request.js'
import {exportData,downLoad} from '@/api'
methods:{
   // 取消请求1
    abortDownload1() {
         abortRequest(controller1)
    }
    // 取消请求2
     abortDownload2() {
         abortRequest(controller2)
    }
    
    // 发起请求1
    fetchData1() {
        controller1 = new AbortController()
         const abortController = controller1
        exportData(data,abortController).then(res => {
            console.log('成功')
        })
        .catch(err => {
               if (axios.isCancel(err)) {
            console.log('下载被取消')
            common.showMessage(this, '到导出取消', 'warning')
          } else if (err.name === 'AbortError') {
            console.log('下载被中止')
          } else {
            console.error(`下载错误：${err.message}`)
          }
        })
    
    },
      fetchData2() {
        controller2 = new AbortController()
         const abortController = controller2
        download(data,abortController).then(res => {
            console.log('成功')
        })
        .catch(err => {
               if (axios.isCancel(err)) {
            console.log('下载被取消')
            common.showMessage(this, '到导出取消', 'warning')
          } else if (err.name === 'AbortError') {
            console.log('下载被中止')
          } else {
            console.error(`下载错误：${err.message}`)
          }
        })
    
    },
    
    
}