處理重復請求:沒有響應(yīng)完成的請求,再去請求一個相同的請求,會把之前的請求取消掉
新增一個cancelRequest.js
文件文章來源:http://www.zghlxwxcb.cn/news/detail-655093.html
import axios from "axios"
const cancelTokens = {}
export const addPending = (config) => {
const requestKey = getRequestKey(config)
if (cancelTokens[requestKey]) {
cancelTokens[requestKey].cancel('cancel request')
}
const source = axios.CancelToken.source()
cancelTokens[requestKey] = source
config.cancelToken = source.token
}
export const deletePending = (res) => {
const requestKey = getRequestKey(res.config)
if (cancelTokens[requestKey]) {
delete cancelTokens[requestKey]
}
}
const getRequestKey = (config = {}) => {
return config.url + config.method + JSON.stringify(config.params, config.data)
}
request.js
文章來源地址http://www.zghlxwxcb.cn/news/detail-655093.html
import axios from "axios"
import { baseUrl } from "@/config"
import { addPending, deletePending } from "./cancelRequest"
const service = axios.create({
baseURL: baseUrl,
timeout: 100000,
})
service.interceptors.request.use(
config => {
addPending(config)
return config
},
error => {
return Promise.error(error)
}
)
service.interceptors.response.use(
success => {
deletePending(success)
},
error => {
deletePending(error)
}
)
export default service
到了這里,關(guān)于Axios使用CancelToken取消重復請求的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!