Sử dụng Fetch API để tạo một HTTP Request trong Javascript

Sử dụng Fetch API để tạo một HTTP Request trong Javascript

Làm việc với dữ liệu từ Server là một phần ko thể thiếu đối với bất kỳ một Frontend Developer nào. Để tương tác với Server API, hầu hết mọi người sẽ chọn Axios bởi nó quá phổ biến và dễ sử dụng.

Tuy nhiên, cũng mang nhiều thắc mắc rằng: "Nếu chỉ sử dụng Javascript thuần thì mang thể tương tác được với Server API ko?". Câu trả lời là mang và đó chính là Fecth API.

Fecth API là gì?

Đây là một khái niệm rất hay trong Javascript, nó là một giải pháp tốt giúp tạo HTTP Request cho ứng dụng Frontend. Nó giống như XMLHTTPRequest nhưng cách sử dụng thì đơn thuần hơn rất nhiều. Muốn tạo một HTTP Request bạn chỉ cần sử dụng duy nhất một phương thức fecth() của Fecth API

Thông số trước tiên của phương thức fetch() là API URL, phương này trả về một Promise, chúng ta cần xử lý nó để lấy kết quả trả về theo mong muốn.

fetch('https://jsonplaceholder.typicode.com/posts').then(res => console.log(res) ); 

Đây là kết quả của request trên

Bạn mang thể access thông tin trong những tính chất headers và status bằng cách sau

fetch('https://jsonplaceholder.typicode.com/posts').then((res) => {     const headers = res.headers;     const status = res.status; // returns http status like 200, 404 etc.     const isStatusOk = res.ok; // returns true if status is between 200 and 299. }); 

Để chuyển dữ liệu của Body Response sang dạng Json bạn mang thể sử dụng phương thức json(). Phương thức này trả về một Promise

fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()).then(data => {	console.log(data) }); 

Kết quả

Article post on: nongdanmo.com

Trong Response Object mang một vài phương thức giúp chung ta format kiểu dữ liệu theo mong muốn như: json, text, blob, formData, hay arrayBuffer

  • json() - Phương thức này trả về kiểu json
  • text() - Phương thức này trả về dữ liệu kiểu text
  • blob() - Phương thức này trả về Blob format
  • formData() - Trả về kiểu FormData
  • arrayBuffer() - Trả về kiểu ArrayBuffer

Ví dụ như để get dữ liệu với kiểu text format chúng ta làm như sau

fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.text()).then(data => console.log(data)); 

Sử dụng HTTP post request

Phương thức request mặc định được sử dụng trong fetch()GET. Như ở ví dụ trên chúng ta đang sử dụng GET method hay nói cách khác: Lúc chỉ truyền một thông số vào fetch() method thì nó sẽ nhận mặc định là phương thức request GET. Vậy nếu muốn sử dụng request post thì chúng ta làm như thế nào?

const options = {     method: 'POST',     headers: {'Content-Type': 'application/json'},     body: JSON.stringify({title: 'new', post: 'new post'}) }; fetch('https://jsonplaceholder.typicode.com/posts', options).then((res) => res.json()).then(data => console.log(data)); 

Handling Errors

fecth() cung ứng cho chúng ta một phương thức để bắt lỗi của server đó là catch(). Nhưng nó ko bắt được tất cả những trường hợp lỗi, nó chỉ care được những case như network error hay invalid host address etc. Nếu mang bất kỳ lỗi với một response và bad http status .

Source: nongdanmo.com

Ví dụ về handle error

fetch('https://invalid-host-address/posts')	.then((res) => res.json())	.then(data => console.log(data))	.catch(error => console.log('Error:', error)); 

Trường hợp lỗi invalid URL (404)

fetch('https://jsonplaceholder.typicode.com/no-such-page') .then((res) => {     console.log(res.status);    return res.json(); }) .then(data => console.log('Success:', data)) .catch(error => console.log('Error:', error)); Kết quả vẫn là success 

Nếu muốn Handle được những lỗi mà catch() ko bắt được thì bạn cần xử lý thêm.

Via @: nongdanmo.com

Ví dụ

fetch('https://jsonplaceholder.typicode.com/no-such-page') .then((res) => {      if(!res.ok) {         throw new Error('An Error Occured');     }     return res.json(); }) .then(data => console.log('Success:', data)) .catch(error => console.log('Failed:', error)); 

Sử dụng Aasync và Await

Để đơn thuần hóa và làm cho code trở nên mạch lạch hơn bạn mang thể sử dụng phương thức fetch() kết hợp với async/await như bên dưới. Để hiểu hơn về async/await độc giả thêm ở bài viết này

async function fetchHandler() { let response = await fetch('https://jsonplaceholder.typicode.com/posts'); let posts = await response.json(); console.log(posts); } fetchHandler(); 

Handling error trong async/await

Với cách viết async/await làm code ngắn gọn mạch lạc hơn, tuy nhiêu điều quan yếu nhất là bạn vẫn phải debug được lỗi lúc cần. Để làm được điều đó chúng ta sử dụng try ... catch như sau

async function fethHandler() {

  try {     let response = await fetch('https://jsonplaceholder.typicode.com/posts');     let posts = await response.json();     if(!response.ok) {        const error = new Error('An Error Occured');        error.details = posts;        throw error;     }     console.log(posts);   } catch(e) {     console.log(e.message);     console.log(e.details);   } } fethHandler(); 

Tổng kết:

Liên quan tới chủ đề này bạn mang thể tham khảo thêm một số bài viết sau hoặc đăng ký nhận tin mới từ chúng tôi

  • Promises in JavaScript
  • Hiểu về async and await trong JavaScript
  • Javascript try…catch để Handling Error 
  • Sử dụng Axios cho ứng dụng Frontend của bạn

Article post on: nongdanmo.com

Recommended For You

About the Author: Bảo