Hướng dẫn dùng oeapi JavaScript
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi. Show 1- Tổng quan về Fetch APIRất thường xuyên trong lập trình Javascript bạn cần lấy dữ liệu từ một URL. Bạn có thể nghĩ đến XMLHttpRequest API, nó thực sự là một API giúp bạn làm được điều bạn muốn, nhưng nó không thân thiện, bạn phải viết code khá dài để đạt được mục đích. Sử dụng jQuery là một ý tưởng hay, cú pháp jQuery.ajax(..) ngắn gọn và dễ hiểu, nhưng bạn phải thêm thư viện jQuery vào ứng dụng của bạn. ES6 được giới thiệu vào tháng 6 năm 2015, có rất nhiều tính năng mới được đưa vào trong đó có Promise. Và Fetch API là một tiêu chuẩn mới để tạo một yêu cầu (request) gửi đến server và nhận về một dữ liệu, mục đích của nó giống với XMLHttpRequest, sự khác biệt là Fetch API được viết dựa trên khái niệm Promise.
Fetch API xây dựng một hàm fetch(url,options) dùng để lấy dữ liệu từ một URL, hàm này trả về một Promise, nó giống như sau:
Và bạn có thể sử dụng Fetch API một cách khá đơn giản, chỉ cần gọi hàm fetch(url,options) và nhận được một lời hứa giải quyết (resolve) đối tượng response.
2- Get Text - response.text()Sử dụng Fetch API để gửi một yêu cầu và nhận về một văn bản là một nhiệm vụ đơn giản và dễ hiểu nhất.
Hàm fetch(..) trả về một lời hứa giải quyết (resolve) một đối tượng response. Vì vậy để gửi một yêu cầu (request) để lấy về một dữ liệu văn bản bạn cần thực hiện bước 1 như sau: get-text-example.js (Step 1)
Phương thức response.text() trả về một lời hứa giải quyết một đối tượng text, vì vậy bạn có thể viết tiếp code cho ví dụ này như sau: get-text-example-way1.js
Fetch API được thiết kế để bạn có thể thực hiện các nhiệm vụ theo một dây chuyền (Chain), điều này có thể là vì phương thức promise.then(..), promise.catch(..) cũng được thiết kế để trả về một lời hứa. Cho dù hàm function(response) mà bạn viết trả về một giá trị thông thường hay trả về một đối tượng Promise, thì phương thức then() luôn trả về một Promise. get-text-example-way2.js
get-text-example.html
3- Get JSON - response.json()Sử dụng Fetch API để gửi một yêu cầu và nhận về một JSON sẽ phức tạp hơn một chút so với gửi yêu cầu để nhận về một văn bản. Bởi vì bạn cần xử lý lỗi xẩy ra khi JSON có định dạng không hợp lệ hoặc dữ liệu NULL. json-simple-data.json
Hàm fetch(..) trả về một lời hứa giải quyết một đối tượng response. Bước 1 (Step 1), hãy viết code của bạn đơn giản như sau: get-json-example.js (Step 1)
Way 1: Phương thức response.json() trả về một lời hứa giải quyết (resolve) một đối tượng JSON, vì vậy bạn có thể sử dụng phương thức response.json().then(..). get-json-example_way1.js
Way 2: get-json-example-way2.js
get-json-example.html
Null JSON Data?
Giả sử bạn gửi một yêu cầu (request) để lấy thông tin của một nhận viên theo ID. Trường hợp nhân viên tồn tại bạn sẽ nhận được một dữ liệu JSON, ngược lại nếu nhân viên không tồn tại bạn sẽ nhận được một dữ liệu NULL. Tuy nhiên một dữ liệu NULL gây ra lỗi tại vị trí gọi response.json(). Hãy xem ví dụ:
(Error)
Hãy sử dụng response.text() thay vì response.json(): get-json-null-example.js
get-json-null-example.html
4- Get Blob - response.blob()Phương thức response.blob() trả về một lời hứa giải quyết (resolve) một đối tượng Blob. Ví dụ dưới đây tôi sẽ sử dụng Fetch API để download một ảnh cho bởi một URL và hiển thị nó trên trang. get-blob-example.js
get-blob-example.html
5- Get ArrayBuffer - response.arrayBuffer()Phương thức response.arrayBuffer() trả về một lời hứa giải quyết (resolve) đối tượng ArrayBuffer. Dữ liệu được tải về dưới dạng bộ đệm (buffer) giúp bạn có thể làm việc ngay với nó mà không cần phải chờ đợt toàn bộ dữ liệu được download về, chẳng hạn một Video có dung lượng lớn, bạn có thể xem Video trong khi dữ liệu của nó vẫn đang được tải về trình duyệt của bạn. Dưới đây là một ví dụ sử dụng Fetch API để chơi một file nhạc. get-arraybuffer-example.js
get-arraybuffer-example.html
6- Get FormData - response.formData()Phương thức response.formData() trả về một lời hứa giải quyết (resolve) đối tượng FormData. Bạn thường sử dụng phương thức này tại Service Workers. Khi người dùng gửi dữ liệu Form tới máy chủ, dữ liệu này sẽ đi qua Service Workers trước khi tới máy chủ. Tại Service Workers bạn có thể gọi phương thức response.formData(), và sửa đổi các giá trị trong FormData nếu muốn.
|