使 axios catch() 函数在其他组件中可重用

Question

I recently read this question and wanted to ask a more specific question in my scenario.

I have many different axios components in my app, which all behave a bit differently in the then() function. However, I have a universally same catch() function, and I found myself repeating this huge code block in every axios function I have. This, of course, didn't seem to follow the DRY principle very well.

Is there a way to create a more flexible Axios component I can reuse, or just a way to avoid pasting the catch() block everywhere?

axios
  .patch/delete/get/post(
    "API ROUTE URL",
    {
      withCredentials: true,
    }
  )
  .then(function (response) {
    // stuff like...
    // setDrafts(response.data.results);
    // setState(response.data);
    // alert(message);
  })
  .catch(function (error) {
    // this portion is the same universally
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
    toast.error(
      `ERROR ${error.response.status}: 
      See console log for more info and please report this incident`,
      {
        duration: 4000,
        position: 'bottom-center',
      }
    );
    console.log(error.config);
  });

Answer 1

Simply create a catch function and reuse it wherever you want.

const catch_func = (error) {
    // this portion is the same universally
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
    toast.error(
      `ERROR ${error.response.status}: 
      See console log for more info and please report this incident`,
      {
        duration: 4000,
        position: 'bottom-center',
      }
    );
    console.log(error.config);
  }

axios
  .patch/delete/get/post(
    "API ROUTE URL",
    {
      withCredentials: true,
    }
  )
  .then(function (response) {
    // stuff like...
    // setDrafts(response.data.results);
    // setState(response.data);
    // alert(message);
  })
  .catch(catch_func);