使Axios Catch（）函数在其他组件中可重复使用

发布于 2025-02-10 20:02:12 字数 1454 浏览 0 评论 0原文

我的应用程序中有许多不同的Axios组件，这些组件在the（）函数中的表现都有所不同。但是，我具有普遍的捕获（）函数，并且发现自己在每个AXIOS功能中都重复了这个巨大的代码块。当然，这似乎并没有很好地遵循干燥的原则。

有没有一种方法可以创建一个可以重复使用的更灵活的Axios组件，或者只是避免粘贴到处的catch（）块的一种方法？

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城仅有旧梦在 2025-02-17 20:02:12

只需创建一个捕获函数，然后在任何需要的地方重复使用即可。

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);

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);

回复收藏 0 原文

~没有更多了~