vue.js - 在 then() 而不是 catch() 中捕获 axios 取消
问题描述
我制作了一个多上传文件表单。
用户取消后,一旦使用 cancel() 取消了相应的 axios 调用,我就会有一种奇怪的行为。我的 axios 调用被捕获在 then() 中,而它应该被捕获在 catch() 中。then() 内部的响应返回undefined
.
我很难确定我是否在前端部分做错了什么,我认为我的电话可能缺少一些标题或者它可能在后端部分?
const payload = { file, objectId: articleId, contentType: 'article' };
const source = axios.CancelToken.source();
// callback to execute at progression
const onUploadProgress = (event) => {
const percentage = Math.round((100 * event.loaded) / event.total);
this.handleFileUploadProgression(file, {
percentage,
status: 'pending',
cancelSource: source,
});
};
attachmentService
.create(payload, { onUploadProgress, cancelToken: source.token })
.then((response) => {
// cancelation response ends up here with a `undefined` response content
})
.catch((error) => {
console.log(error);
// canceled request do not reads as errors down here
if (axios.isCancel(error)) {
console.log('axios request cancelled', error);
}
});
服务本身定义如下
export const attachmentService = {
create(payload, requestOptions) {
// FormData cannot be decamelized inside an interceptor so it's done before, here.
const formData = new FormData();
Object.entries(payload).forEach(([key, value]) =>
formData.append(decamelize(key), value),
);
return api
.post(resource, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
...requestOptions,
})
.then((response) => {
console.log(response, 'cancelled request answered here as `undefined`');
return response.data;
})
.catch((error) => {
// not caught here (earlier)
return error.data;
});
},
};
在文件对象执行时调用取消
file.cancelSource.cancel('Request was cancelled by the user');
解决方案
正如@estus-flask 在评论中所建议的那样,问题是我在服务内部发现了错误(为时过早)。谢谢!
export const articleService = {
create(payload, requestOptions) {
// FormData cannot be decamelized inside an interceptor so it's done before, here.
const formData = new FormData();
Object.entries(payload).forEach(([key, value]) =>
formData.append(decamelize(key), value),
);
return api.post(resource, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
...requestOptions,
});
},
};
推荐阅读
- react-native - flatlist 分页使应用程序在 android 上非常慢
- javascript - 在地图功能中为一个项目反应切换类(但是当另一个项目将被从另一个项目中删除时)
- javascript - 没有猎犬的 Typeahead 返回多个错误
- python - 如何将 unicode 转换为数据框列的字符串?
- python - 如何将 matplotlib 中的默认字体设置为 Helvetica?
- python - 使用python从API获取JSON数据时获取keyerror
- scala - 将嵌套的 spark Row 转换为嵌套的地图 Map[String, Any](反之亦然)
- ruby-on-rails - ActiveRecord/Devise 未提供“已采取错误”
- teradata - 脚本执行后获取 teradata tpt 作业名称
- javascript - 下拉菜单未显示反应 jsx 中的选项