HomeLập trìnhJavaScriptHướng dẫn API...

Hướng dẫn API tìm nạp JavaScript với các ví dụ về tiêu đề và bài viết tìm nạp JS


Nếu bạn đang viết một ứng dụng web, rất có thể bạn sẽ phải làm việc với dữ liệu bên ngoài. Đây có thể là cơ sở dữ liệu của riêng bạn, API của bên thứ ba, v.v.

Khi AJAX xuất hiện lần đầu tiên vào năm 1999, nó đã chỉ cho chúng ta một cách tốt hơn để xây dựng các ứng dụng web. AJAX là một cột mốc quan trọng trong phát triển web và là khái niệm cốt lõi đằng sau nhiều công nghệ hiện đại như React.

Trước AJAX, bạn phải kết xuất lại toàn bộ trang web ngay cả đối với các bản cập nhật nhỏ. Nhưng AJAX đã cho chúng tôi một cách để tìm nạp nội dung từ phần phụ trợ và cập nhật các phần tử giao diện người dùng đã chọn. Điều này đã giúp các nhà phát triển cải thiện trải nghiệm người dùng và xây dựng các nền tảng web lớn hơn, phức tạp hơn.

Khóa học cấp tốc về API REST

1-9

Hiện tại chúng ta đang ở thời đại của API RESTful. Nói một cách đơn giản, API REST cho phép bạn đẩy và kéo dữ liệu từ kho dữ liệu. Đây có thể là cơ sở dữ liệu của bạn hoặc máy chủ của bên thứ ba như API Twitter.

Có một số loại API REST khác nhau. Hãy xem những cái bạn sẽ sử dụng trong hầu hết các trường hợp.

  • ĐƯỢC— Lấy dữ liệu từ API. Ví dụ: nhận người dùng twitter dựa trên tên người dùng của họ.
  • BƯU KIỆN— Đẩy dữ liệu lên API. Ví dụ: tạo một bản ghi người dùng mới với tên, tuổi và địa chỉ email.
  • ĐẶT— Cập nhật một bản ghi hiện có với dữ liệu mới. Ví dụ: cập nhật địa chỉ email của người dùng.
  • XÓA BỎ– Xóa một bản ghi. Ví dụ: xóa người dùng khỏi cơ sở dữ liệu.

Có ba yếu tố trong mọi API REST. Yêu cầu, phản hồi và tiêu đề.

Yêu cầu— Đây là dữ liệu bạn gửi tới API, giống như id đơn hàng để tìm nạp chi tiết đơn hàng.

Đọc thêm  Khóa học thao tác JavaScript DOM
2-6
Yêu cầu mẫu

Phản ứng— Bất kỳ dữ liệu nào bạn lấy lại từ máy chủ sau khi yêu cầu thành công/thất bại.

3-5
Phản hồi mẫu

tiêu đề— Siêu dữ liệu bổ sung được chuyển tới API để giúp máy chủ hiểu loại yêu cầu mà nó đang xử lý, ví dụ: “loại nội dung”.

4-2
Tiêu đề mẫu

Ưu điểm thực sự của việc sử dụng API REST là bạn có thể xây dựng một lớp API duy nhất cho nhiều ứng dụng cùng hoạt động.

Nếu bạn có cơ sở dữ liệu mà bạn muốn quản lý bằng ứng dụng web, thiết bị di động và máy tính để bàn, tất cả những gì bạn cần là một Lớp API REST duy nhất.

Bây giờ bạn đã biết cách API REST hoạt động, hãy xem cách chúng ta có thể sử dụng chúng.

XMLHttpRequest

Trước khi JSON chiếm lĩnh thế giới, định dạng trao đổi dữ liệu chính là XML. XMLHttpRequest() là một hàm JavaScript cho phép tìm nạp dữ liệu từ các API trả về dữ liệu XML.

XMLHttpRequest cung cấp cho chúng tôi tùy chọn tìm nạp dữ liệu XML từ phần phụ trợ mà không cần tải lại toàn bộ trang.

Chức năng này đã phát triển từ những ngày đầu chỉ là XML. Giờ đây, nó hỗ trợ các định dạng dữ liệu khác như JSON và văn bản gốc.

Hãy viết một lệnh gọi XMLHttpRequest đơn giản tới API GitHub để tìm nạp hồ sơ của tôi.

// function to handle success
function success() {
    var data = JSON.parse(this.responseText); //parse the string to JSON
    console.log(data);
}

// function to handle error
function error(err) {
    console.log('Request Failed', err); //error details will be in the "err" object
}

var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest
xhr.onload = success; // call success function if request is successful
xhr.onerror = error;  // call error function if request failed
xhr.open('GET', 'https://api.github.com/users/manishmshiva'); // open a GET request
xhr.send(); // send the request to the server.

Đoạn mã trên sẽ gửi yêu cầu GET tới https://api.github.com/users/manishmshiva để tìm nạp thông tin GitHub của tôi dưới dạng JSON. Nếu phản hồi thành công, nó sẽ in JSON sau ra bàn điều khiển:

5-2

Nếu yêu cầu không thành công, nó sẽ in thông báo lỗi này ra bàn điều khiển:

Đọc thêm  Một lời giải thích đơn giản về lan truyền sự kiện trong JavaScript.
8-1

Tìm nạp API

Fetch API là một phiên bản XMLHttpRequest đơn giản, dễ sử dụng hơn để sử dụng tài nguyên một cách không đồng bộ. Fetch cho phép bạn làm việc với API REST với các tùy chọn bổ sung như lưu trữ dữ liệu vào bộ nhớ đệm, đọc phản hồi phát trực tuyến, v.v.

Sự khác biệt chính là Tìm nạp hoạt động với lời hứa chứ không phải lệnh gọi lại. Các nhà phát triển JavaScript đã tránh xa các cuộc gọi lại sau khi giới thiệu các lời hứa.

Đối với một ứng dụng phức tạp, bạn có thể dễ dàng có thói quen viết các cuộc gọi lại dẫn đến gọi lại địa ngục.

Với lời hứa, thật dễ dàng để viết và xử lý các yêu cầu không đồng bộ. Nếu bạn chưa quen với lời hứa, bạn có thể tìm hiểu cách chúng hoạt động tại đây.

Đây là cách chức năng chúng tôi đã viết trước đó sẽ trông như thế nào nếu bạn sử dụng hàm tìm nạp () thay vì XMLHttpRequest:

// GET Request.
fetch('https://api.github.com/users/manishmshiva')
    // Handle success
    .then(response => response.json())  // convert to json
    .then(json => console.log(json))    //print data to console
    .catch(err => console.log('Request Failed', err)); // Catch errors

Tham số đầu tiên của chức năng Tìm nạp phải luôn là URL. Fetch sau đó nhận một đối tượng JSON thứ hai với các tùy chọn như phương thức, tiêu đề, nội dung yêu cầu, v.v.

Có một sự khác biệt quan trọng giữa đối tượng phản hồi trong XMLHttpRequest và Fetch.

XMLHttpRequest trả về dữ liệu dưới dạng phản hồi trong khi đối tượng phản hồi từ Tìm nạp chứa thông tin về chính đối tượng phản hồi. Điều này bao gồm các tiêu đề, mã trạng thái, v.v. Chúng tôi gọi hàm “res.json()” để lấy dữ liệu chúng tôi cần từ đối tượng phản hồi.

Một điểm khác biệt quan trọng nữa là Fetch API sẽ không đưa ra lỗi nếu yêu cầu trả về mã trạng thái 400 hoặc 500. Nó vẫn sẽ được đánh dấu là phản hồi thành công và được chuyển đến hàm ‘then’.

Đọc thêm  Cách xác thực URL trong JavaScript

Tìm nạp chỉ đưa ra lỗi nếu bản thân yêu cầu bị gián đoạn. Để xử lý 400 và 500 phản hồi, bạn có thể viết logic tùy chỉnh bằng cách sử dụng ‘response.status’. Thuộc tính ‘trạng thái’ sẽ cung cấp cho bạn mã trạng thái của phản hồi được trả về.

Tuyệt quá. Bây giờ bạn đã hiểu cách hoạt động của Fetch API, hãy xem xét thêm một vài ví dụ như truyền dữ liệu và làm việc với các tiêu đề.

Bạn có thể chuyển các tiêu đề bằng thuộc tính “tiêu đề”. Bạn cũng có thể sử dụng hàm tạo tiêu đề để cấu trúc mã của mình tốt hơn. Nhưng việc chuyển một đối tượng JSON đến thuộc tính “tiêu đề” sẽ hoạt động trong hầu hết các trường hợp.

fetch('https://api.github.com/users/manishmshiva', {
  method: "GET",
  headers: {"Content-type": "application/json;charset=UTF-8"}
})
.then(response => response.json()) 
.then(json => console.log(json)); 
.catch(err => console.log(err));

Truyền dữ liệu cho một yêu cầu POST

Đối với một yêu cầu POST, bạn có thể sử dụng thuộc tính “body” để chuyển một chuỗi JSON làm đầu vào. Xin lưu ý rằng phần thân yêu cầu phải là một chuỗi JSON trong khi các tiêu đề phải là một đối tượng JSON.

// data to be sent to the POST request
let _data = {
  title: "foo",
  body: "bar", 
  userId:1
}

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: "POST",
  body: JSON.stringify(_data),
  headers: {"Content-type": "application/json; charset=UTF-8"}
})
.then(response => response.json()) 
.then(json => console.log(json));
.catch(err => console.log(err));

Fetch API vẫn đang được phát triển tích cực. Chúng ta có thể mong đợi các tính năng tốt hơn trong tương lai gần.

Tuy nhiên, hầu hết các trình duyệt đều hỗ trợ việc sử dụng Tìm nạp trong các ứng dụng của bạn. Biểu đồ bên dưới sẽ giúp bạn tìm ra trình duyệt nào hỗ trợ tính năng này trên web và ứng dụng dành cho thiết bị di động.

6-2

Tôi hy vọng bài viết này đã giúp bạn hiểu cách làm việc với Fetch API. Hãy chắc chắn dùng thử Tìm nạp cho ứng dụng web tiếp theo của bạn.


Tôi thường xuyên viết về Machine Learning, Cyber ​​Security và DevOps. Bạn có thể đăng ký cho tôi bản tin hàng tuần đây.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status