Tìm nạp tham số javascript

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

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

Tìm nạp 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 giản hơn rất nhiều. Muốn tạo một Yêu cầu HTTP, bạn chỉ cần sử dụng duy nhất một phương thức fecth() của Fecth API

Tham số đầu tiên của phương thức tìm nạp() là API URL, phương thức này trả về một Lời hứa, 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)
);

This is results of request on

Bạn có thể truy cập thông tin trong các thuộc tính tiêu đề và trạng thái 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 định dạng Json, bạn có thể sử dụng phương thức json(). This method return to a Promise

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

Kết quả

Trong Response Object có một số phương thức trợ giúp chung cho định dạng kiểu dữ liệu theo mong muốn. json, văn bản, blob, formData, hay arrayBuffer

• 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.
  });
  

  6- Phương thức này trả về kiểu json

• 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.
  });
  

  7- Phương thức này trả về kiểu dữ liệu văn bản

• 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.
  });
  

  8 - Phương thức này trả về định dạng Blob

• 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.
  });
  

  0- Trả về FormData

• 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.
  });
  

  1 - Trả về kiểu ArrayBuffer

Ví dụ như để lấy dữ liệu với kiểu định dạng văn bản chúng ta làm như sau

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

Use HTTP post request

Phương thức yêu cầu mặc định được sử dụng trong

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.
});

2 là GET. Như ở ví dụ trên chúng ta đang sử dụng phương thức GET hay nói cách khác. Khi chỉ truyền một tham số vào phương thức fetch() thì nó sẽ nhận mặc định là phương thức yêu cầu GET. Vì vậy nếu muốn sử dụng yêu cầu đăng bài thì chúng ta làm như thế nào?

Để sử dụng yêu cầu POST, bạn chỉ cần truyền vào tham số thứ 2 của phương thức

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.
});

3 như sau

________số 8

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.
});

4 of headers default is

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.
});

5. Để gửi dữ liệu là Json thì bạn đặt nó về

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.
});

6 và tương tự cho các kiểu dữ liệu khác

Xử lý lỗi

fetch() cung cấp cho chúng tôi một phương thức để bắt lỗi của máy chủ, đó là catch(). Nhưng nó không bắt được tất cả các trường hợp lỗi, nó chỉ quan tâm đến những trường hợp như lỗi mạng hay địa chỉ máy chủ không hợp lệ, v.v. Nếu có bất kỳ lỗi nào với phản hồi và trạng thái http xấu

Ví dụ về xử lý lỗi

Trường hợp URL không hợp lệ error (404)

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

Ví dụ

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.
});

2

Use Aasync and Await

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

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.
});

3

Trong đoạn mã này ngắn gọn hơn rất nhiều phải không nào, các bạn không cần phải sử dụng

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.
});

7 nữa

Xử lý lỗi trong async/await

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

chức năng không đồng bộ fethHandler() {

Tổng kết

Hy vọng bài viết này giúp các bạn có cái nhìn rõ hơn về phương thức

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.
});

3 trong Javascript và cách sử dụng nó với Async/Await

Liên quan đến chủ đề này bạn có 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