Computer >> Máy Tính >  >> Lập trình >> Javascript

Tìm nạp JavaScript:Hướng dẫn

Bạn có biết rằng bạn có thể thực hiện các yêu cầu web bằng JavaScript vani không? Đúng vậy, bạn không cần cài đặt bất kỳ thư viện nào để thực hiện yêu cầu web. Đó không phải là tất cả:chúng tôi không nói về công cụ XMLHttpRequest cũ, phức tạp.

API tìm nạp cho phép bạn thực hiện các yêu cầu Ajax bằng JavaScript cũ thuần túy. Đây là một công cụ hữu ích để truy xuất dữ liệu và thực hiện các thay đổi đối với dữ liệu trên máy chủ web.

Trong hướng dẫn này, chúng ta sẽ thảo luận về API tìm nạp là gì và cách bạn có thể thực hiện các yêu cầu web bằng cách sử dụng API. Chúng ta sẽ nói qua hai ví dụ:yêu cầu GET và yêu cầu ĐĂNG.

API tìm nạp là gì?

JavaScript đã có khả năng gửi các yêu cầu mạng từ lâu. Công cụ XMLHTTPRequest đã cung cấp các tài nguyên bạn cần để truy xuất dữ liệu từ máy chủ và cập nhật thông tin từ máy chủ.

Mặc dù công cụ này rất hiệu quả, nhưng nó cũng khá dài dòng và phức tạp để sử dụng. Mặt khác, Fetch là một giải pháp thay thế mới giúp việc thực hiện các yêu cầu web trở nên đơn giản hơn.

API tìm nạp được hỗ trợ trong tất cả các trình duyệt hiện đại. Điều này có nghĩa là khi bạn học cách sử dụng nó, bạn sẽ không phải lo lắng về khả năng tương thích của trình duyệt khi thực hiện các yêu cầu web.

Cách thực hiện yêu cầu GET bằng cách sử dụng tìm nạp

Cách tốt nhất để minh họa cách hoạt động của tìm nạp là lấy ví dụ. Đối với hướng dẫn này, chúng tôi sẽ sử dụng dịch vụ web JSONPlaceholder. Đây là một API đi kèm với dữ liệu giả được viết sẵn mà chúng tôi có thể sử dụng để kiểm tra các yêu cầu web của mình.

Đoạn mã sau tạo một yêu cầu GET để truy xuất bài đăng đầu tiên từ JSONPlaceholder:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ. 

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))

Mã này trả về:

{ body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto", id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", userId: 1 }

Hãy chia nhỏ mã của chúng ta. Trên dòng đầu tiên, chúng tôi đã sử dụng fetch() để bắt đầu một yêu cầu web tới API JSONPlaceholder. Sau đó, chúng tôi đã sử dụng .then() phương pháp để cho mã của chúng tôi biết phải làm gì sau khi yêu cầu web của chúng tôi đã được thực hiện.

Trong .then() đầu tiên của chúng tôi , chúng tôi chuyển đổi phản hồi do API trả về thành JSON. Điều này làm cho dữ liệu của chúng tôi dễ đọc hơn. Chúng tôi sử dụng một .then() khác phương pháp ghi lại phản hồi vào bảng điều khiển. Điều này hiển thị cho chúng tôi bài đăng có ID 1 từ API JSONPlaceholder.

Cách thực hiện yêu cầu ĐĂNG

GET không phải là loại yêu cầu duy nhất bạn có thể thực hiện với API tìm nạp. Ngoài ra còn có chức năng hỗ trợ các yêu cầu POST, PUT và DELETE. Cú pháp của những thứ này giống nhau, vì vậy chúng ta sẽ chỉ đi qua một ví dụ:cách thực hiện yêu cầu ĐĂNG.

Khi bạn thực hiện một yêu cầu ĐĂNG, XÓA hoặc XÓA, thường có ba phần thông tin bạn cần chỉ định:

  • URL mà bạn đang đưa ra yêu cầu.
  • Phương pháp bạn đang sử dụng để đưa ra yêu cầu (trong trường hợp này là ĐĂNG)
  • Dữ liệu bạn muốn gửi đến máy chủ

Đây là đoạn mã sẽ tạo nhận xét mới bằng cách sử dụng API JSONPlaceholder:

const data = {
	name: "Leslie Tudor",
	email: "leslie.tudor@email.com",
	body: "This is an example post by Career Karma!",
	postId: 1
}

const options = {
	method: "POST",
	body: JSON.stringify(data),
	headers: {
		"Content-Type": "application/json"
	}
};

fetch('https://jsonplaceholder.typicode.com/comments', options)
  .then(response => response.json())
  .then(json => console.log(json))

Mã của chúng tôi trả về bài đăng mới được tạo của chúng tôi ở định dạng JSON:

{ body: "This is an example post by Career Karma!", email: "leslie.tudor@email.com", id: 501, name: "Leslie Tudor", postId: 1 }

Trong mã của chúng tôi, đầu tiên chúng tôi khai báo một đối tượng dữ liệu. Điều này lưu trữ dữ liệu mà chúng tôi muốn gửi đến máy chủ. Trong trường hợp này, chúng tôi đang gửi dữ liệu về nhận xét của người dùng có tên Leslie Tudor.

Sau đó, chúng tôi khai báo một đối tượng khác lưu trữ các tùy chọn được liên kết với yêu cầu tìm nạp của chúng tôi. Đối tượng này chỉ định phương thức chúng tôi đang sử dụng để thực hiện yêu cầu của mình (POST), dữ liệu chúng tôi muốn gửi, cũng như các tiêu đề chúng tôi muốn gửi.

Cuối cùng, chúng tôi sử dụng fetch() để thực sự đưa ra yêu cầu của chúng tôi. Giống như trong ví dụ đầu tiên của chúng tôi, chúng tôi sử dụng .then() các phương thức để truy xuất phản hồi, chuyển đổi nó thành JSON, sau đó in nó ra bảng điều khiển.

Cách xử lý lỗi khi sử dụng JavaScript Fetch

Một thực tế đáng tiếc là một số yêu cầu web không hoạt động như dự kiến. Có thể dữ liệu được cấu trúc không chính xác hoặc có thể có sự cố máy chủ. Điều quan trọng là chúng tôi phải dự đoán trước những sự kiện này để có thể xử lý chúng nếu và khi chúng phát sinh.

Có một phương thức được gọi là .catch() mà bạn có thể sử dụng để bắt bất kỳ lỗi nào đã được mã của bạn trả về. Kết hợp với Promise.reject() , bạn có thể sử dụng nó để xử lý lỗi:

fetch('https://jsonplaceholder.typicode.com/comments/999, options)
  .then(response => {
	if (response.ok) {
		console.log(response.json());
		return response.json();
	} else {
		return Promise.reject({ statusText: response.statusText })
	}
})
.catch(error => console.log("ERROR:", error.statusText));

Mã này trả về:

"ERROR:", "Not Found"

Trong mã của chúng tôi, chúng tôi đã sử dụng phương thức response.ok để kiểm tra xem yêu cầu của chúng tôi có thành công hay không. Trong ví dụ này, chúng tôi đã cố gắng truy xuất một nhận xét không tồn tại, nhận xét # 999. Điều này gây ra nội dung của else của chúng tôi câu lệnh được thực thi, trả về một lời hứa bị từ chối. Lời hứa này chứa thông báo lỗi do API JSONPlaceholder trả về.

Sau đó, chúng tôi đã sử dụng .catch() để nhận lỗi này và in ra bảng điều khiển.

Kết luận

API tìm nạp giúp dễ dàng thực hiện các yêu cầu web bằng JavaScript. API là một phần của JavaScript vani nên không cần cài đặt hoặc tham khảo bất kỳ thư viện nào. Hơn nữa, bạn có thể sử dụng API tìm nạp để thực hiện các yêu cầu GET, POST, PUT và DELETE.

Bây giờ, bạn đã sẵn sàng để bắt đầu thực hiện các yêu cầu web bằng cách sử dụng API tìm nạp như một nhà phát triển chuyên nghiệp!


No