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

Question

I'm trying to move a bunch of axios calls to a separate utility file so that I can share them and avoid rewriting the same or similar axios calls all over the place.

However, I can't figure out how to do this and still take advantage of the then and catch part of the call where I do unique things like updating state and/or variables.

Here is an axios call that I use and I have similar variations on this across my app:

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!");
  });

So is there a way to have an axios call like this, yet have it be more generic, so that I can accept different urls, data, etc and still take advantage of the then part of the call?

Answer 1

You can return the axios call. Returning the axios call (which internally calls axios.request and returns a promise) would allow chainability:

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

Then, when you need it, import it:

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