Question

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

但是，我无法弄清楚该怎么做，仍然利用了调用中的then和catch部分，在该部分中我进行了一些独特的工作，例如更新状态和/或变量。 / p>

这是我使用的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 => { … });

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

1 个答案: