如何隔离和提取常见的axios调用以防止代码重复

Question

我正试图将一堆axios调用移到一个单独的实用程序文件中，这样我就可以共享它们，避免到处重写相同或相似的axios调用。

然而，我不知道如何做到这一点，仍然可以利用调用的then和catch部分，在这些部分我可以做一些独特的事情，比如更新状态和/或变量。

这是我使用的axios调用，我的应用程序中也有类似的变体：

axios({
method: "post",
url: `/api/PlanetTime/Battle/${this.props.levelId}/files/upload`,
data: bodyFormData,
config: {
headers: { "Content-Type": "multipart/form-data" }
}
})
.then(response => {
let newFile = response.data[response.data.length - 1];
this.props.onUploadEnd(response.data);
this.setState({
selectedFile: null,
file: null
});
})
.catch(response => {
console.log("upload error!");
});

那么，有没有一种方法可以进行这样的axios调用，但它更通用，这样我就可以接受不同的url、数据等，并且仍然可以利用调用的then部分？

Answer 1

您可以返回axios调用。返回axios调用(内部调用axios.request并返回promise(将允许链接性：

function createRequest(url, data) {
return axios({
// Set up axios instance config
});
}

然后，当你需要它时，导入它：

createRequest('…', { … })
.then(response => { … })
.catch(error => { … });