尝试在 React 中实现 Axios答案

【问题标题】：Trying to implement Axios in React尝试在 React 中实现 Axios
【发布时间】：2021-07-21 17:36:16
【问题描述】：

这就是axios的实现

import axios from "axios";
axios.interceptors.response.use(null, (error) => {
  console.log("INTERCEPTOR CALLED");
  return Promise.reject(error);
});

这就是建立连接的函数。首先，我更新状态，然后请求服务器，如果出现问题，则将状态恢复为原始状态。

handleDelete = async (post) => {
const orginialPosts = this.state.posts;
const posts = this.state.posts.filter((p) => p.id !== post.id);
this.setState({ posts });
try {
  await axios.delete(apiEndpoint + "/" + post.id);
  throw new Error("Pandemic. xd");
} catch (ex) {
  console.log("handle delete catch block");
  if (ex.response && ex.response.status === 404)
    alert("This post has already been deleted");
  alert("Something Failed while deleting a post!");
  this.setState({ posts: orginialPosts });
}
};

所以在控制台中它应该打印：- 拦截器被调用处理删除捕获块

相反，它正在打印：- 处理删除捕获块

我不知道为什么会这样。

还有一件事是有什么方法可以用特定的代码抛出错误，比如：-

throw new Error status(404).

或者创建整个快速处理程序，然后发送带有状态码 404 的响应是唯一的方法。

我只是想创建一个状态码为 404 的错误。

【问题讨论】：

也许可以试试axios.delete().then( data => throw new Error('404'))。您当前在 axios 之外抛出错误。
但我使用的是 axios 拦截器，这意味着它应该先拦截错误，然后再将其传递。实际上我指的是一些视频，他以同样的方式实现了它并得到了预期的结果。不过我没有使用他的 axios 版本。
你现在做的是在axios外面抛出一个错误，但是期望axios来处理这个错误。
我阅读了 axios 文档并在 axios 拦截错误函数中写到 - “任何超出 2xx 范围的状态代码都会导致此函数触发”。我检查了 chrome 中的网络选项卡，有 200 和 204，因此“抛出新错误（”“）”创建的错误不会通过 throw axios 错误处理。我认为这就是为什么它不拦截的答案。你怎么看？
为什么不呢？只需使用/iadhsaiuhdiausdhiuwehdiw。 404 表示不存在。

标签： javascript reactjs error-handling axios

【解决方案1】：

错误已解决，问题是throw new Error(""); 发送的状态码为 200 或 204，并且 axios 拦截器捕获了 2xx 范围之外的错误。上面的代码很好，只是状态码搞砸了。

【讨论】：