Tìm nạp API JavaScript

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 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ó đã cho chúng ta thấy 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 cập nhật nhỏ. Nhưng AJAX đã cung cấp 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 thành phần 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

Chúng ta đang ở thời đại của RESTful APIs. 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

• GET — Nhận 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ọ
• POST — Đẩ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
• PUT — Cập nhậ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 — Xóa 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

Phản hồi — Mọi dữ liệu bạn nhận được từ máy chủ sau khi yêu cầu thành công/thất bại

Tiêu đề — Siêu dữ liệu bổ sung được chuyển đến 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”

Ư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 để 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. Bây giờ 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', '//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 để lấy thông tin GitHub của tôi trong JSON. Nếu phản hồi thành công, nó sẽ in JSON sau ra bàn điều khiển

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

Tìm nạp API

Fetch API là 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ộ. Tìm nạp 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ộ đệ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, không 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['//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. Tìm nạp sau đó lấy 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 là “độ phân giải. json[]” để lấy dữ liệu chúng ta 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'

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 'phản hồi. trạng thái'. 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 thức 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 đề

Làm việc với 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['//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['//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ợ nó trên web và ứng dụng dành cho thiết bị di động

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ý nhận bản tin hàng tuần của tôi tại đây

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

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

Làm cách nào để gọi API trong JavaScript bằng cách sử dụng tìm nạp?

Chúng tôi có thể sử dụng tìm nạp trong JavaScript không?

Làm cách nào để tìm nạp dữ liệu JSON từ API trong JavaScript?