Which HTTP response status codes result in then() and which in catch() ?
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.
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.
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.
Please Login to comment...