如何隔离和提取常见的 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 并返回一个承诺）将允许可链接性：

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

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

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