ReactLMS

Fetch API

6 min to read

Khái niệm

Fetch API là một công cụ được tích hợp sẵn trong các trình duyệt hiện đại như Google Chrome, Firefox, và Edge. Nó cung cấp một cách dễ dàng và mạnh mẽ để giao tiếp với server và lấy dữ liệu từ các API.

Cú pháp

Để sử dụng Fetch API, chúng ta sẽ sử dụng hàm fetch() và truyền vào URL của API hoặc đường dẫn tới tệp tin trên server. Đây là cú pháp cơ bản:

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

Hàm fetch() sẽ trả về một Promise và chúng ta có thể sử dụng các phương thức như .then() và .catch() để xử lý kết quả trả về hoặc các lỗi xảy ra.

Xử lý response

Khi response được trả về, chúng ta có thể xử lý dữ liệu theo nhiều cách khác nhau. Một cách đơn giản là sử dụng phương thức .json() để chuyển đổi response thành đối tượng JSON:

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

Ngoài ra, chúng ta có thể sử dụng phương thức .text() để nhận dữ liệu dưới dạng văn bản, .blob() để nhận dữ liệu dưới dạng đối tượng Blob, và nhiều phương thức khác tuỳ vào yêu cầu của ứng dụng.

Gửi dữ liệu lên server

Để gửi dữ liệu lên server thông qua Fetch API, chúng ta có thể sử dụng phương thức POST và truyền các thông tin cần thiết trong body của request.

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

Ở đây, chúng ta đã sử dụng phương thức POST và truyền dữ liệu dưới dạng JSON thông qua body của request. Chúng ta cũng có thể sử dụng các phương thức khác như PUT, PATCH, hoặc DELETE tùy thuộc vào yêu cầu của ứng dụng.

Xử lý lỗi

Trong trường hợp xảy ra lỗi trong quá trình gửi request hoặc nhận response, chúng ta có thể xử lý lỗi bằng cách sử dụng phương thức .catch().

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

Trong ví dụ trên, nếu response không thành công (status code không phải 200), chúng ta sẽ ném ra một lỗi và xử lý nó trong phần .catch().

Kiểm tra HTTP Status

Khi response được trả về, chúng ta có thể kiểm tra HTTP Status bằng cách sử dụng thuộc tính status trong đối tượng response.

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
  });

Trong ví dụ trên, chúng ta kiểm tra nếu status code là 200 (OK), chúng ta xử lý response thành công. Trong trường hợp khác, chúng ta xử lý khi có lỗi trong response.

Xử lý HTTP Status cụ thể

Ngoài việc kiểm tra status code, chúng ta cũng có thể xử lý các HTTP Status cụ thể bằng cách sử dụng phương thức .ok và phương thức .statusText.

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
  });

Trong ví dụ trên, chúng ta sử dụng phương thức .ok để kiểm tra response có thành công hay không (status code từ 200-299). Nếu response không thành công, chúng ta kiểm tra các status code khác như 404 (Không tìm thấy) hoặc 500 (Lỗi server) để xử lý tương ứng.

Chúng ta cũng có thể sử dụng phương thức .statusText để lấy thông báo mô tả HTTP Status.

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
  });