axios请求中断的几种方法
作者：小胖霞
在实际应用场景中,假如有一个下载或者导出请求,数据量非常大的情况下,接口响应的会很慢,这时候我我们想中断请求,该怎么做呢？本文给大家介绍了axios请求中断的几种方法,需要的朋友可以参考下
背景
在实际应用场景中，假如有一个下载或者导出请求，数据量非常大的情况下，接口响应的会很慢，这时候我我们想中断请求，该怎么做呢？
我们先来看一下axios官方给出的请求中断的方法 AXios请求中断 axios中文网
方法一：传入cancelToken
传入cancelToken,在页面调用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)
}
)
// 响应拦截
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('中断请求')
}
}
方法二：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:{
// 导出
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('中止导出')
}
}
}
多个请求的取消
此方法利用 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">发起请求 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}`)
}
})
},
}
到此这篇关于axios请求中断的几种方法的文章就介绍到这了,更多相关axios请求中断内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！