尝试在 React 中实现 Axios

Question

So this is the axios implementation

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

And this is the function which is establishing connection. In this first I am updating the state and then requesting server and if something goes south then reverting the state back to original state.

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

So in console it should print:- INTERCEPTOR CALLED handle delete catch block

Instead it is printing:- handle delete catch block

I can't figure out why it's happening.

And one more thing is there any way to throw error with specific code, something like:-

throw new Error status(404).

Or creating the whole express handler and then sending response with status code 404 is the only way.

I just wanted to create a Error with status code 404.

Answer 1

The error got resolved, the issue was throw new Error(""); was sending a status code of 200 or 204 and the axios interceptor catches error outside the range of 2xx. The above code was fine, it was just status code messing up.