Tham số thứ hai trong hàm tìm nạp()

Khi chúng tôi cố gắng sử dụng fetch()chức năng trong lớp, chúng tôi có xu hướng sử dụng nó để lấy dữ liệu từ API trên trang web.

https://reqres.in/là một trang web cung cấp API cho các nhà phát triển để kiểm tra mã của họ. Nhà phát triển có thể thử nghiệm các phương thức HTTP khác nhau và nhận được phản hồi thực nhưng dữ liệu giả (REQRES, 2023). Chúng tôi sẽ sử dụng trang web này để kiểm tra mã của chúng tôi nhiều lần.

Ví dụ: chúng tôi có thể lấy dữ liệu giả để biết tên của người dùng từhttps://reqres.in/với fetch().

Nếu bạn nhấp vào nút Kiểm tra tìm nạp() để lấy dữ liệu , thì tìm nạp sẽ cố gắng lấy dữ liệu từ 'https://reqres.in/api/users/2'với phương thức GET. Bạn có thể thấy “Janet” được thêm vào bên dưới.

Tuy nhiên, tìm nạp không chỉ có thể được sử dụng để tìm nạp dữ liệu. Nó có một tham số thứ hai có thể cho phép bạn tùy chỉnh những gì bạn muốn làm với chức năng tìm nạp.

Nó là tùy chọn , vì vậy bạn hoàn toàn có thể bỏ qua nó và nó vẫn hoạt động để lấy dữ liệu, giống như chúng tôi đã làm trước đây.

Tham số thứ hai phải là một đối tượng . Và bên trong đối tượng này, bạn có thể bao gồm nhiều tham số phụ, bao gồm phần thân, phần đầu, phương thức… (MDN, 2023).

Có một ví dụ:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Vì vậy, làm thế nào để chúng ta sử dụng nó?

Trong ví dụ này, khi người dùng nhấp vào nút Kiểm tra bài đăng, ứng dụng của chúng tôi sẽ đăng tên và công việc của người dùng lên máy chủ. Và sẽ có một dấu thời gian bên dưới để cho người dùng biết thời gian tạo.

.catch((lỗi) =>{})

Như chúng ta đã biết, hàm fetch() sẽ trả về a Promise Object. Tuy nhiên, nếu máy chủ không phản hồi và lời hứa không được thực hiện thì sao?

Sẽ có một lỗi!

Vì vậy chúng ta cần sử dụng catch((error) => {})để bắt lỗi để tránh bị treo.

Hãy xem mã ví dụ.

Trong ví dụ này, tôi 'vô tình' nhận được liên kết sai. Vì vậy, lời hứa sẽ không được thực hiện và sẽ có lỗi. Vì vậy, nếu người dùng nhấp vào nút Kiểm tra bài đăng, bảng điều khiển sẽ in ra 'Lỗi!!!'.

Sử dụng nhiều hơn đối tượng Phản hồi

Chúng ta đã thảo luận về tình huống xảy ra lỗi và Promise Object không được thực hiện. Nhưng nếu đối tượng lời hứa được trả về fetch()được thực hiện, nó sẽ trả về một đối tượng Phản hồi .

Có một số thuộc tính phiên bản (MDN, 2023):

• Phản hồi.ok
• Phản hồi.status
• Response.statusText
• phản hồi.url
• …

Tôi đã sử dụng Response.status, trả về mã trạng thái HTTP và Response.ok, trả về giá trị boolean , chúng tôi có thể xem liệu quá trình tìm nạp có thành công hay không.

Trong ví dụ này, nếu người dùng nhấp vào nút Kiểm tra bài đăng, sẽ có mã trạng thái HTTP và giá trị boolean để xem có thành công hay không.

Hủy bỏ tìm nạp

Người dùng cũng có thể hủy bỏ tìm nạp bằng cách sử dụng tệp AbortController Object.

Chúng ta cần tạo một AbortController Objecttệp riêng.

let controller = new AbortController();

Vì vậy, tham số thứ hai mới của chúng tôi là:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

Tôi đặt một khoảng thời gian để thực hiện hủy bỏ(). Vì vậy, khi tôi nhấp vào hủy bỏ trước và Bài kiểm tra sẽ đưa ra AbortError trong bảng điều khiển. Và trạng thái HTTP và mã sẽ không được hiển thị dưới nút Bài kiểm tra như chúng tôi đã làm trước đây.

Thẩm quyền giải quyết

MĐN. (2023). Tìm nạp () - apis web: MDN. API web | MĐN. Truy cập ngày 31 tháng 3 năm 2023, từhttps://developer.mozilla.org/en-US/docs/Web/API/fetch

YÊU CẦU. (2023). API phần còn lại được lưu trữ sẵn sàng đáp ứng các yêu cầu Ajax của bạn. Yêu cầu. Truy cập ngày 31 tháng 3 năm 2023, từhttps://reqres.in/

MĐN. (2023). Phản hồi — web apis: MDN. API web | MĐN. Truy cập ngày 31 tháng 3 năm 2023, từhttps://developer.mozilla.org/en-US/docs/Web/API/Response

MĐN. (2023). Bộ điều khiển hủy bỏ — apis web: MDN. API web | MĐN. Truy cập ngày 31 tháng 3 năm 2023, từhttps://developer.mozilla.org/en-US/docs/Web/API/AbortController