Directorio de artículos
prefacio
Cuando la ejecución del código en el evento lleva tiempo y el usuario hace clic en el botón continuamente en un período corto de tiempo, el evento en el que el botón se activa varias veces en un período corto de tiempo (inicia continuamente una solicitud al servidor)
Úselo directamente en la página vue
El código es el siguiente (ejemplo):
<script>
import axios from 'axios'
import qs from 'qs'
export default {
methods: {
request(keyword) {
var CancelToken = axios.CancelToken
var source = CancelToken.source()
// 取消上一次请求
this.cancelRequest();
// 有的人可能会出现415 400的错误，415是因为没有设置对Content-Type 400是因为使用了qs.stringify(), 可以修改成JSON.stringify() 试试
axios.post(url, qs.stringify({
kw:keyword}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
cancelToken: new axios.CancelToken(function executor(c) {
that.source = c;
})
}).then((res) => {
// 在这里处理得到的数据
...
}).catch((err) => {
if (axios.isCancel(err)) {
console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message
} else {
//handle error
console.log(err);
}
})
},
cancelRequest(){
if(typeof this.source ==='function'){
this.source('终止请求')
}
},
}
}
</script>
Clase de herramienta de utilidades de paquete
Encapsule axios la solicitud, procésela en el interceptor de respuesta y finalice la última solicitud
Proceder de la siguiente:
- Defina un
Mapidentificador de cancelación [función] utilizado para almacenar la solicitud de envío.- En el interceptor de solicitudes, elimine las solicitudes duplicadas [las solicitudes duplicadas se refieren a: el mismo método + ruta + parámetros de entrada].
- En el interceptor de solicitudes, almacene el indicador de cancelación antes de enviar la solicitud
Map.- En el interceptor de respuesta, retire la solicitud.
El código es el siguiente (ejemplo):
import axios from "axios";
let pendingMap = new Map();
/**
* 取消正在发送的请求
* @param {*} config
*/
let removePending = function(config){
var key = `${
config.method}:${
config.url}:${
JSON.stringify(config.params)}`;
var func = pendingMap.get(key);
if(func){
func();
pendingMap.delete(key);
}
}
// 创建axios实例
const baseURL = "/api";
const requests = axios.create({
baseURL:baseURL,
timeout:5000
});
//请求拦截器
requests.interceptors.request.use((config) =>{
removePending(config);
// config 中包含 headers 请求头
config.headers.Authorization = `Bear ${
sessionStorage.getItem("token")}`;
// 发送请求,并将请求的取消标识放入pendingMap中
config.cancelToken = new axios.CancelToken((cancelToken) => {
pendingMap.set(`${
config.method}:${
config.url}:${
JSON.stringify(config.params)}`,cancelToken)
});
return config;
});
//响应拦截器
requests.interceptors.response.use((res) => {
// 请求成功移出请求
removePending(res.config);
return res.data;
},(error) => {
return Promise.reject(error);
});
export default requests;