1. What will the output be in the console if we run the following code in a browser?

try {
 setInterval(() => {
  throw new Error("Oops");
 }, 1000);
} catch (ex) {
  console.log("Sorry, there is a problem", ex); 
}

We'd get a message saying that an uncaught error (Oops) has occurred. The console.log statement wouldn't be reached.

2. Assuming that post 9999 doesn't exist, what would be the output in the console if we ran the following code in a browser:

fetch("https://jsonplaceholder.typicode.com/posts/9999")
  .then(response => {
    console.log("HTTP status code", response.status);
    return response.json();
  })
  .then(data => console.log("Response body", data))
  .catch (error => console.log("Error", error));

The key thing is that an HTTP error doesn't get handled in the catch method with the fetch function.

3. If we did a similar exercise with axios, what would be the output in the console when running the following code?

axios
  .get("https://jsonplaceholder.typicode.com/posts/9999")
  .then(response => {
    console.log("HTTP status code", response.status);
  })
  .catch(error => {
    console.log("Error", error.response.status);
  });

The key thing is that an HTTP error does get handled in the catch method with  axios.

4. What is a benefit of using the native fetch over axios?

If we are targeting modern browsers (and not IE) and only require simple REST API interaction then fetch is arguably more favorable than axios because our code isn't dependent on third-party code.  It will also probably run a little faster because there is less non-native code being executed.

5. How can we add a bearer token to the following axios request?

axios.get("https://jsonplaceholder.typicode.com/posts/1")

6. The second parameter is an object literal that has a header property that can contain HTTP headers for the request:

axios
  .get("https://jsonplaceholder.typicode.com/posts/1", {
    headers: {
      "Authorization": `Bearer ${token}`
    }
  });

7. We are using the following axios PUT request to update a post title:

axios.put("https://jsonplaceholder.typicode.com/posts/1", {
  title: "corrected title", 
  body: "some stuff"
});

The body hasn't changed though – it's just the title we want to update. How can we change this to a PATCH request to make this REST call more efficient?

axios.patch("https://jsonplaceholder.typicode.com/posts/1", {
  title: "corrected title"
});

8. We have implemented a function component to display a post. It uses the following code to get the post from a REST API:

React.useEffect(() => {
  axios
    .get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then(...)
    .catch(...);
});

What is wrong with the preceding code?

The second parameter in the useEffect function is missing, which means the REST API will be called every time the component is rendered. An empty array should be supplied as the second parameter so that the REST API is only called on the first render:

React.useEffect(() => {
  axios
    .get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then(...)
    .catch(...);
}, []);