React Native Fetch Response Code - Javascript

Introduction

React Native is a popular framework for building mobile applications. One of the key features of React Native is its ability to make HTTP requests using the fetch API. The fetch API is a modern replacement for XMLHttpRequest, which was the standard way of making HTTP requests prior to the advent of fetch. One important aspect of making HTTP requests is handling the response code. In this article, we will explore how to handle response codes in React Native using the fetch API.

Basic Usage of Fetch API in React Native

The fetch API is quite simple to use. Here's an example of how to use fetch to make a GET request:

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))

In this example, we're making a GET request to https://example.com/data and expecting a JSON response. The then method is called twice. The first then method handles the response object, and the second then method handles the data. If an error occurs during the request, the catch method is called.

Response Codes

HTTP response codes are three-digit codes returned by a server in response to a client's request. The first digit identifies the class of the response, and the last two digits do not have any categorization role. There are five classes of response codes, ranging from 100 to 500. Response codes are returned in the status property of the Response object.

Handling Response Codes

Handling response codes is important when making HTTP requests. A response code of 200 indicates that the request was successful, while a code of 404 indicates that the requested resource was not found, and a code of 500 indicates that an internal error occurred on the server.

Here is an example of how to handle different response codes using the fetch API:

fetch('https://example.com/data')
  .then(response => {
    if (response.status === 200) {
      // handle success
      return response.json();
    } else if (response.status === 404) {
      // handle not found
      throw new Error('Resource not found');
    } else if (response.status === 500) {
      // handle internal server error
      throw new Error('Internal server error');
    }
  })
  .catch(error => {
    // handle error
    console.log(error);
  });

In this example, we've added a conditional statement that checks the value of the status property of the response object. If the status is 200, we return the data as JSON. If the status is 404, we throw an error with a message of "Resource not found". If the status is 500, we throw an error with a message of "Internal server error". If an error occurs during the request, the catch method is called, which logs the error to the console.

Conclusion

Handling response codes is an important aspect of making HTTP requests in React Native. With the fetch API, we can easily check the response code and handle it accordingly. By doing so, we can create more robust and reliable mobile applications.