快捷導(dǎo)航

axios請求中斷的幾種方法

更新時間：2024年10月15日 08:25:29 作者：小胖霞

在實際應(yīng)用場景中,假如有一個下載或者導(dǎo)出請求,數(shù)據(jù)量非常大的情況下,接口響應(yīng)的會很慢,這時候我我們想中斷請求,該怎么做呢？本文給大家介紹了axios請求中斷的幾種方法,需要的朋友可以參考下

背景

在實際應(yīng)用場景中，假如有一個下載或者導(dǎo)出請求，數(shù)據(jù)量非常大的情況下，接口響應(yīng)的會很慢，這時候我我們想中斷請求，該怎么做呢？

我們先來看一下axios官方給出的請求中斷的方法 AXios請求中斷 axios中文網(wǎng)

方法一：傳入cancelToken

傳入cancelToken,在頁面調(diào)用request.cancel('中斷請求')

api請求代碼： axios代碼封裝request.js

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)
  }
)
// 響應(yīng)攔截
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('訪問了未授權(quán)的資源或者登入狀態(tài)已失效，你可以繼續(xù)留在這個頁面，或者重新登入', '是否重新登入', {
          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 系統(tǒng)正在重新發(fā)布中，請稍后再試',
        type: 'error',
        duration: 5 * 1000
      })
    } else if (error.response && error.response.status === 404) {
      Message({
        message: '404 系統(tǒng)正在重新發(fā)布中或請求不存在，請稍后再試',
        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'
// 這是一個導(dǎo)出接口
export function export(data, cancelToken) {
  return request({
    url: '/order/order-export',
    method: 'post',
    responseType: 'blob',
    data,
    cancelToken
  })

在頁面中調(diào)用接口

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

methods:{
// 導(dǎo)出
exportData() {
     const request = axios.CancelToken.source()
     this.request = request
     export({},request.token)
     .then(res => {})
     .catch((err) => {})
 },
 //取消
 handleCancel () {
  this.request.cancel('中斷請求')
 }
}

方法二：AbortController

此方法必須要求axios的版本最低是V0.22.0,否則不生效還是上面的代碼，做以下修改：

// 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:{
// 導(dǎo)出
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('中止導(dǎo)出')
   }
 }
}

多個請求的取消

此方法利用 fetch API 方式—— AbortController 取消請求：

首先要對request.js的封裝做出修改

// 取消請求
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">發(fā)起請求 1</button>
    <button @click="abortDownload1">中止請求 1</button>
    <button @click="fetchData2">發(fā)起請求 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)
    }
    
    // 發(fā)起請求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, '到導(dǎo)出取消', '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, '到導(dǎo)出取消', 'warning')
          } else if (err.name === 'AbortError') {
            console.log('下載被中止')
          } else {
            console.error(`下載錯誤：${err.message}`)
          }
        })
    
    },
    
    
}

到此這篇關(guān)于axios請求中斷的幾種方法的文章就介紹到這了,更多相關(guān)axios請求中斷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: