title: Making axios catch() function reusable in other components
body: <p>I recently read <a href="https://stackoverflow.com/questions/65812995/how-can-i-make-my-axios-function-reusable-in-other-react-typescript-components">this question</a> and wanted to ask a more specific question in my scenario.</p>
  <p>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.</p>
  <p>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?</p>
  <pre class="lang-js prettyprint-override"><code>axios
    .patch/delete/get/post(
      &quot;API ROUTE URL&quot;,
      {
        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);
    });
  </code></pre>