Which HTTP response status codes result in then() and which in catch() ?

Axios is a popular JavaScript library for making HTTP requests. It uses promises to handle the response from the server, and provides a convenient then() and catch() syntax for working with the data or handling errors.

Have you ever wondered which HTTP response status codes will cause axios to call the then() callback, and which will cause it to call the catch() callback? In this article, we'll explain how axios handles HTTP response status codes and show you how to handle different types of responses in your code.

1. Understanding HTTP response status codes

HTTP is the protocol that powers the web. When a client (such as a web browser) makes a request to a server, the server responds with a status code indicating the outcome of the request. Status codes are divided into five categories, based on their first digit:

• 1xx: Informational
• 2xx: Success
• 3xx: Redirection
• 4xx: Client errors
• 5xx: Server errors

The most common status codes you'll encounter are in the 2xx and 4xx/5xx ranges. 2xx codes indicate that the request was successful, while 4xx/5xx codes indicate that there was an error.

Here are some examples of common 2xx and 4xx/5xx status codes:

• 200: OK
• 201: Created
• 204: No Content
• 400: Bad Request
• 404: Not Found
• 500: Internal Server Error

2. How axios handles HTTP response status codes

When you make an HTTP request with axios, the library returns a promise. If the request is successful (i.e. the server responds with a 2xx status code), the promise will be resolved and the then() callback will be called with the response data. On the other hand, if the request fails (i.e. the server responds with a 4xx or 5xx status code), the promise will be rejected and the catch() callback will be called with the error.

Example: In this example, if the HTTP request to /some/url receives a response with a 2xx status code, the success handler in the then() callback will be called with the response data. On the other hand, if the response has a 4xx or 5xx status code, the error handler in the catch() callback will be called with the error.

axios.get('/some/url')
    .then(response => {
        // handle success
    })
    .catch(error => {
        // handle error
    });

3. Handling different types of responses

Now that you know how axios handles HTTP response status codes, you can write code that can handle different types of responses from the server. For example, you might want to do something different depending on whether the request was successful or not.

Example: This example of how one could handle a successful (2xx) and a failed (4xx/5xx) response differently.

axios.get('/some/url')
    .then(response => {
        // handle success
        if (response.status === 200) {
            // do something with the data...
        } else if (response.status === 201) {
            // do something else...
        }
    })
    .catch(error => {
        // handle error
        if (error.response.status === 400) {
            // handle bad request error...
        } else if (error.response.status === 404) {
            // handle not found error...
        }
    });

In this example, we're using the `status` property of the response object to check the HTTP status code. If the code is 2xx, we handle the success case in the `then()` callback. If the code is 4xx/5xx, we handle the error case in the `catch()` callback.

You can use this pattern to handle any type of HTTP response and write more robust code that can handle different scenarios.

Conclusion: In this article, we learnt how axios handles HTTP response status codes and the write code that can handle different types of responses. We covered the basic categories of HTTP status codes, and showed you how to use the `then()` and `catch()` callbacks of an axios promise to handle successful and failed responses.