AbortController在ajax和vue.js中不起作用

Question

我想在离开页面时取消API，但它在AbortController中不起作用，这是我的代码片段

import { fetchSingleList } from '@/api/scada'
data() {
return {
abortController: new AbortController()
}
}
beforeDestroy() {
this.abortController.abort()
},
methods: {
getData(){
fetchSingleList(data, { signal: this.abortController.signal }).then(res => ())
}
}

这是fetchSingleList函数

export function fetchSingleList(data) {
return request({
url: 'api/scada/report',
method: 'post',
data
});
}

CCD_ 2函数来自axios拦截器

service.interceptors.request.use(
config => {
return config;
},
error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
return response.data;
},
error => {
let message = error.message;
if (error.response.data && error.response.data.errors) {
message = error.response.data.errors;
} else if (error.response.data && error.response.data.error) {
message = error.response.data.error;
}
return Promise.reject(error);
}
);

我的axios版本是^0.22.0

Answer 1

在fetchSingleList中，您需要将data和signal组合在一个对象中，因为您只有一个参数。

getData(){
fetchSingleList({ data, signal: this.abortController.signal }).then(res => ())
}

Answer 2

我发现我的数据在config.data中，所以我在axios拦截器中修改了我的代码，它起作用了！

这是代码

axios拦截器

service.interceptors.request.use(config => {
let cfg = {...config}
if (config.data && config.data.data) {
cfg = {
...config,
data: config.data.data,
signal: config.data.signal
}
}
console.log(cfg)
return cfg;
})

api(vue SFC(

fetchSingleList({ data: data, signal: this.abortController.signal }).then(res => {})