Concept

The Fetch API is a built-in tool in modern browsers like Google Chrome, Firefox, and Edge. It provides an easy and powerful way to communicate with the server and retrieve data from APIs.

Syntax

To use Fetch API, we will use the fetch() function and pass the URL of the API or the path to the file on the server. This is the basic syntax:

fetch(url)
  .then(response => {
    // Xử lý response
  })
  .catch(error => {
    // Xử lý lỗi
  });

The fetch() function returns a Promise and we can use methods like .then() and .catch() to handle the returned result or any errors that occur.

Handle response

When the response is returned, we can process the data in many different ways. One simple way is to use the .json() method to convert the response to a JSON object:

fetch(url)
  .then(response => response.json())
  .then(data => {
    // Xử lý dữ liệu JSON
  })
  .catch(error => {
    // Xử lý lỗi
  });

Additionally, we can use the .text() method to receive data as text, .blob() to receive data as a Blob object, and many other methods depending on the application's requirements.

Send data to the server

To send data to the server using Fetch API, we can use the POST method and pass the necessary information in the request body.

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    // Xử lý response
  })
  .catch(error => {
    // Xử lý lỗi
  });

Here, we have used the POST method and passed data as JSON through the request body. We can also use other methods like PUT, PATCH, or DELETE depending on the application's requirements.

Error handling

In case there is an error in the process of sending the request or receiving the response, we can handle the error using the .catch() method.

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('Request failed');
    }
    // Xử lý response
  })
  .catch(error => {
    // Xử lý lỗi
  });

In the example above, if the response is not successful (status code is not 200), we will throw an error and handle it in the .catch() section.

Check HTTP Status

When the response is returned, we can check the HTTP Status by using the status property in the response object.

fetch(url)
  .then(response => {
    if (response.status === 200) {
      // Xử lý khi response thành công (status code 200)
    } else {
      // Xử lý khi có lỗi trong response
    }
  })
  .catch(error => {
    // Xử lý lỗi
  });

In the example above, we check if the status code is 200 (OK), we process the response successfully. In other cases, we handle when there is an error in the response.

Handle specific HTTP Status

In addition to checking the status code, we can also handle specific HTTP Status by using the .ok method and the .statusText method.

fetch(url)
  .then(response => {
    if (response.ok) {
      // Xử lý khi response thành công (status code 200-299)
    } else if (response.status === 404) {
      // Xử lý khi không tìm thấy (status code 404)
    } else if (response.status === 500) {
      // Xử lý khi có lỗi server (status code 500)
    } else {
      // Xử lý các trường hợp khác
    }
  })
  .catch(error => {
    // Xử lý lỗi
  });

In the example above, we use the .ok method to check if the response is successful or not (status code from 200-299). If the response is not successful, we check other status codes like 404 (Not Found) or 500 (Server Error) to handle accordingly.

We can also use the .statusText method to get the HTTP Status description message.

fetch(url)
  .then(response => {
    if (response.ok) {
      // Xử lý khi response thành công (status code 200-299)
    } else {
      console.log('Lỗi: ' + response.statusText);
    }
  })
  .catch(error => {
    // Xử lý lỗi
  });

In the example above, we use response.statusText to get the description message of the HTTP Status and print it to the console when the response is not successful.