Khách hàng có thể xem mã javascript không?

Một trang web bao gồm một trang HTML và [thường] nhiều tệp khác, chẳng hạn như biểu định kiểu, tập lệnh và hình ảnh. Mô hình tải trang cơ bản trên Web là trình duyệt của bạn thực hiện một hoặc nhiều yêu cầu HTTP tới máy chủ để cung cấp các tệp cần thiết để hiển thị trang và máy chủ sẽ phản hồi với các tệp được yêu cầu. Nếu bạn truy cập một trang khác, trình duyệt sẽ yêu cầu các tệp mới và máy chủ sẽ phản hồi với chúng

Mô hình này hoạt động hoàn toàn tốt cho nhiều trang web. Nhưng hãy xem xét một trang web rất dựa trên dữ liệu. Ví dụ: một trang web thư viện như Thư viện Công cộng Vancouver. Trong số những thứ khác, bạn có thể coi một trang web như thế này là giao diện người dùng với cơ sở dữ liệu. Nó có thể cho phép bạn tìm kiếm một thể loại sách cụ thể hoặc có thể hiển thị cho bạn các đề xuất cho những cuốn sách bạn có thể thích, dựa trên những cuốn sách bạn đã mượn trước đó. Khi bạn làm điều này, nó cần cập nhật trang với bộ sách mới để hiển thị. Nhưng lưu ý rằng hầu hết nội dung trang — bao gồm các mục như đầu trang, thanh bên và chân trang — vẫn giữ nguyên

Rắc rối với mô hình truyền thống ở đây là chúng tôi phải tìm nạp và tải toàn bộ trang, ngay cả khi chúng tôi chỉ cần cập nhật một phần của nó. Điều này không hiệu quả và có thể dẫn đến trải nghiệm người dùng kém

Vì vậy, thay vì mô hình truyền thống, nhiều trang web sử dụng API JavaScript để yêu cầu dữ liệu từ máy chủ và cập nhật nội dung trang mà không cần tải trang. Vì vậy, khi người dùng tìm kiếm một sản phẩm mới, trình duyệt chỉ yêu cầu dữ liệu cần thiết để cập nhật trang - chẳng hạn như bộ sách mới để hiển thị

API chính ở đây là Fetch API. Điều này cho phép JavaScript chạy trong một trang để thực hiện yêu cầu HTTP tới máy chủ để truy xuất các tài nguyên cụ thể. Khi máy chủ cung cấp chúng, JavaScript có thể sử dụng dữ liệu để cập nhật trang, thường bằng cách sử dụng API thao tác DOM. Dữ liệu được yêu cầu thường là JSON, đây là định dạng tốt để truyền dữ liệu có cấu trúc, nhưng cũng có thể là HTML hoặc chỉ văn bản

Đây là mẫu phổ biến cho các trang web dựa trên dữ liệu như Amazon, YouTube, eBay, v.v. Với mô hình này

• Cập nhật trang nhanh hơn rất nhiều và bạn không phải đợi trang làm mới, nghĩa là trang web sẽ nhanh hơn và phản hồi nhanh hơn
• Ít dữ liệu được tải xuống trên mỗi bản cập nhật, nghĩa là ít lãng phí băng thông hơn. Đây có thể không phải là vấn đề lớn trên máy tính để bàn có kết nối băng thông rộng nhưng lại là vấn đề lớn trên thiết bị di động và ở các quốc gia không có dịch vụ internet nhanh phổ biến

Ghi chú. Trong những ngày đầu, kỹ thuật chung này được gọi là JavaScript và XML không đồng bộ [Ajax], bởi vì nó có xu hướng yêu cầu dữ liệu XML. Ngày nay, điều này thường không xảy ra [bạn có nhiều khả năng yêu cầu JSON hơn], nhưng kết quả vẫn như vậy và thuật ngữ "Ajax" vẫn thường được sử dụng để mô tả kỹ thuật này

Để tăng tốc hơn nữa, một số trang web cũng lưu trữ nội dung và dữ liệu trên máy tính của người dùng khi chúng được yêu cầu lần đầu, nghĩa là trong các lần truy cập tiếp theo, họ sử dụng các phiên bản cục bộ thay vì tải xuống các bản sao mới mỗi khi trang được tải lần đầu. Nội dung chỉ được tải lại từ máy chủ khi nó đã được cập nhật

Hãy xem qua một vài ví dụ về Fetch API

Đối với ví dụ này, chúng tôi sẽ yêu cầu dữ liệu từ một số tệp văn bản khác nhau và sử dụng chúng để điền vào một khu vực nội dung

Loạt tệp này sẽ đóng vai trò là cơ sở dữ liệu giả mạo của chúng tôi; . Tuy nhiên, ở đây, chúng tôi muốn giữ cho nó đơn giản và tập trung vào phần phía máy khách của tài liệu này.

Để bắt đầu ví dụ này, hãy tạo một bản sao cục bộ của bắt đầu tìm nạp. html và bốn tệp văn bản — câu 1. txt, câu 2. txt, câu 3. txt và câu 4. txt — trong một thư mục mới trên máy tính của bạn. Trong ví dụ này, chúng tôi sẽ lấy một câu thơ khác của bài thơ [mà bạn có thể nhận ra rõ ràng] khi nó được chọn trong trình đơn thả xuống

Ngay bên trong phần tử , hãy thêm đoạn mã sau. Điều này lưu trữ các tham chiếu đến các phần tử và

function updateDisplay[verse] {

}

function updateDisplay[verse] {

}

const verseChoose = document.querySelector['select'];
const poemDisplay = document.querySelector['pre'];

verseChoose.addEventListener['change', [] => {
  const verse = verseChoose.value;
  updateDisplay[verse];
}];

Hãy định nghĩa hàm

function updateDisplay[verse] {

}

function updateDisplay[verse] {

}

Chúng tôi sẽ bắt đầu chức năng của mình bằng cách xây dựng một URL tương đối trỏ tới tệp văn bản mà chúng tôi muốn tải, vì chúng tôi sẽ cần nó sau này. Giá trị của phần tử tại bất kỳ thời điểm nào cũng giống như văn bản bên trong

function updateDisplay[verse] {

}

Tuy nhiên, các máy chủ web có xu hướng phân biệt chữ hoa chữ thường và tên tệp không có khoảng trắng trong đó. Để chuyển đổi "Verse 1" thành "verse1. txt", chúng ta cần chuyển chữ V thành chữ thường, xóa khoảng trắng và thêm. txt ở cuối. Điều này có thể được thực hiện với

function updateDisplay[verse] {

}

function updateDisplay[verse] {

}

function updateDisplay[verse] {

}

verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;

Cuối cùng, chúng ta đã sẵn sàng sử dụng Fetch API

// Call `fetch[]`, passing in the URL.
fetch[url]
  // fetch[] returns a promise. When we have received a response from the server,
  // the promise's `then[]` handler is called with the response.
  .then[[response] => {
    // Our handler throws an error if the request did not succeed.
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    // Otherwise [if the response succeeded], our handler fetches the response
    // as text by calling response.text[], and immediately returns the promise
    // returned by `response.text[]`.
    return response.text[];
  }]
  // When response.text[] has succeeded, the `then[]` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then[[text] => poemDisplay.textContent = text]
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];

Có khá nhiều thứ để giải nén ở đây

Đầu tiên, điểm vào của API Tìm nạp là một hàm toàn cục có tên là

function updateDisplay[verse] {

}

Tiếp theo,

function updateDisplay[verse] {

}

verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;

function updateDisplay[verse] {

}

Vì vậy, bởi vì

function updateDisplay[verse] {

}

verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;

verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;

Hóa ra là

verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;

verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;

function updateDisplay[verse] {

}

Cuối cùng, chúng tôi xâu chuỗi một trình xử lý

verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;

Một vấn đề với ví dụ hiện tại là nó sẽ không hiển thị bất kỳ bài thơ nào khi tải lần đầu. Để khắc phục điều này, hãy thêm hai dòng sau vào cuối mã của bạn [ngay phía trên thẻ đóng

// Call `fetch[]`, passing in the URL.
fetch[url]
  // fetch[] returns a promise. When we have received a response from the server,
  // the promise's `then[]` handler is called with the response.
  .then[[response] => {
    // Our handler throws an error if the request did not succeed.
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    // Otherwise [if the response succeeded], our handler fetches the response
    // as text by calling response.text[], and immediately returns the promise
    // returned by `response.text[]`.
    return response.text[];
  }]
  // When response.text[] has succeeded, the `then[]` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then[[text] => poemDisplay.textContent = text]
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];

updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';

Phục vụ ví dụ của bạn từ một máy chủ

Các trình duyệt hiện đại sẽ không chạy các yêu cầu HTTP nếu bạn chỉ chạy ví dụ từ tệp cục bộ. Điều này là do các hạn chế về bảo mật [để biết thêm về bảo mật web, hãy đọc Bảo mật trang web]

Để giải quyết vấn đề này, chúng ta cần kiểm tra ví dụ bằng cách chạy nó thông qua máy chủ web cục bộ. Để tìm hiểu cách thực hiện việc này, hãy đọc hướng dẫn của chúng tôi để thiết lập máy chủ thử nghiệm cục bộ

Trong ví dụ này, chúng tôi đã tạo một trang web mẫu có tên The Can Store — đó là một siêu thị hư cấu chỉ bán đồ hộp. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub và xem mã nguồn

Theo mặc định, trang web hiển thị tất cả các sản phẩm nhưng bạn có thể sử dụng các điều khiển biểu mẫu ở cột bên trái để lọc chúng theo danh mục hoặc cụm từ tìm kiếm hoặc cả hai

Có khá nhiều mã phức tạp xử lý việc lọc sản phẩm theo danh mục và cụm từ tìm kiếm, thao tác chuỗi để dữ liệu hiển thị chính xác trong giao diện người dùng, v.v. Chúng tôi sẽ không thảo luận tất cả về nó trong bài viết, nhưng bạn có thể tìm thấy các nhận xét mở rộng trong mã [xem can-script. js]

Tuy nhiên, chúng tôi sẽ giải thích về Fetch code

Có thể tìm thấy khối đầu tiên sử dụng Tìm nạp khi bắt đầu JavaScript

fetch['products.json']
  .then[[response] => {
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    return response.json[];
  }]
  .then[[json] => initialize[json]]
  .catch[[err] => console.error[`Fetch problem: ${err.message}`]];

Hàm

function updateDisplay[verse] {

}

// Call `fetch[]`, passing in the URL.
fetch[url]
  // fetch[] returns a promise. When we have received a response from the server,
  // the promise's `then[]` handler is called with the response.
  .then[[response] => {
    // Our handler throws an error if the request did not succeed.
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    // Otherwise [if the response succeeded], our handler fetches the response
    // as text by calling response.text[], and immediately returns the promise
    // returned by `response.text[]`.
    return response.text[];
  }]
  // When response.text[] has succeeded, the `then[]` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then[[text] => poemDisplay.textContent = text]
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];

// Call `fetch[]`, passing in the URL.
fetch[url]
  // fetch[] returns a promise. When we have received a response from the server,
  // the promise's `then[]` handler is called with the response.
  .then[[response] => {
    // Our handler throws an error if the request did not succeed.
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    // Otherwise [if the response succeeded], our handler fetches the response
    // as text by calling response.text[], and immediately returns the promise
    // returned by `response.text[]`.
    return response.text[];
  }]
  // When response.text[] has succeeded, the `then[]` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then[[text] => poemDisplay.textContent = text]
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];

Bên trong chức năng này, chúng tôi

• kiểm tra xem máy chủ có trả về lỗi không [chẳng hạn như

  // Call `fetch[]`, passing in the URL.
  fetch[url]
    // fetch[] returns a promise. When we have received a response from the server,
    // the promise's `then[]` handler is called with the response.
    .then[[response] => {
      // Our handler throws an error if the request did not succeed.
      if [!response.ok] {
        throw new Error[`HTTP error: ${response.status}`];
      }
      // Otherwise [if the response succeeded], our handler fetches the response
      // as text by calling response.text[], and immediately returns the promise
      // returned by `response.text[]`.
      return response.text[];
    }]
    // When response.text[] has succeeded, the `then[]` handler is called with
    // the text, and we copy it into the `poemDisplay` box.
    .then[[text] => poemDisplay.textContent = text]
    // Catch any errors that might happen, and display a message
    // in the `poemDisplay` box.
    .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
  

  5]. Nếu nó đã làm, chúng tôi ném lỗi
• gọi

  // Call `fetch[]`, passing in the URL.
  fetch[url]
    // fetch[] returns a promise. When we have received a response from the server,
    // the promise's `then[]` handler is called with the response.
    .then[[response] => {
      // Our handler throws an error if the request did not succeed.
      if [!response.ok] {
        throw new Error[`HTTP error: ${response.status}`];
      }
      // Otherwise [if the response succeeded], our handler fetches the response
      // as text by calling response.text[], and immediately returns the promise
      // returned by `response.text[]`.
      return response.text[];
    }]
    // When response.text[] has succeeded, the `then[]` handler is called with
    // the text, and we copy it into the `poemDisplay` box.
    .then[[text] => poemDisplay.textContent = text]
    // Catch any errors that might happen, and display a message
    // in the `poemDisplay` box.
    .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
  

  6 khi có phản hồi. Điều này sẽ lấy dữ liệu dưới dạng đối tượng JSON. Chúng tôi trả lại lời hứa được trả lại bởi

  // Call `fetch[]`, passing in the URL.
  fetch[url]
    // fetch[] returns a promise. When we have received a response from the server,
    // the promise's `then[]` handler is called with the response.
    .then[[response] => {
      // Our handler throws an error if the request did not succeed.
      if [!response.ok] {
        throw new Error[`HTTP error: ${response.status}`];
      }
      // Otherwise [if the response succeeded], our handler fetches the response
      // as text by calling response.text[], and immediately returns the promise
      // returned by `response.text[]`.
      return response.text[];
    }]
    // When response.text[] has succeeded, the `then[]` handler is called with
    // the text, and we copy it into the `poemDisplay` box.
    .then[[text] => poemDisplay.textContent = text]
    // Catch any errors that might happen, and display a message
    // in the `poemDisplay` box.
    .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
  

  7

Tiếp theo, chúng tôi chuyển một hàm vào phương thức

verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;

// Call `fetch[]`, passing in the URL.
fetch[url]
  // fetch[] returns a promise. When we have received a response from the server,
  // the promise's `then[]` handler is called with the response.
  .then[[response] => {
    // Our handler throws an error if the request did not succeed.
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    // Otherwise [if the response succeeded], our handler fetches the response
    // as text by calling response.text[], and immediately returns the promise
    // returned by `response.text[]`.
    return response.text[];
  }]
  // When response.text[] has succeeded, the `then[]` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then[[text] => poemDisplay.textContent = text]
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];

Để xử lý lỗi, chúng tôi xâu chuỗi một khối

updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';

updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';

updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';

updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';

Tuy nhiên, một trang web hoàn chỉnh sẽ xử lý lỗi này nhẹ nhàng hơn bằng cách hiển thị một thông báo trên màn hình của người dùng và có thể cung cấp các tùy chọn để khắc phục tình huống, nhưng chúng tôi không cần gì hơn là một

updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';

Bạn có thể tự kiểm tra trường hợp thất bại

1. Tạo một bản sao cục bộ của các tệp ví dụ
2. Chạy mã thông qua máy chủ web [như được mô tả ở trên, trong ]
3. Sửa đổi đường dẫn đến tệp đang được tìm nạp, thành một cái gì đó như 'product. json' [đảm bảo rằng nó bị viết sai chính tả]
4. Bây giờ hãy tải tệp chỉ mục trong trình duyệt của bạn [thông qua

   updateDisplay['Verse 1'];
   verseChoose.value = 'Verse 1';
   

   5] và tìm trong bảng điều khiển dành cho nhà phát triển trình duyệt của bạn. Bạn sẽ thấy một thông báo tương tự như "Tìm nạp vấn đề. Lỗi HTTP. 404"

Khối Fetch thứ hai có thể được tìm thấy bên trong hàm

updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';

fetch[url]
  .then[[response] => {
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    return response.blob[];
  }]
  .then[[blob] => showProduct[blob, product]]
  .catch[[err] => console.error[`Fetch problem: ${err.message}`]];

Điều này hoạt động theo cách tương tự như cách trước, ngoại trừ việc thay vì sử dụng

// Call `fetch[]`, passing in the URL.
fetch[url]
  // fetch[] returns a promise. When we have received a response from the server,
  // the promise's `then[]` handler is called with the response.
  .then[[response] => {
    // Our handler throws an error if the request did not succeed.
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    // Otherwise [if the response succeeded], our handler fetches the response
    // as text by calling response.text[], and immediately returns the promise
    // returned by `response.text[]`.
    return response.text[];
  }]
  // When response.text[] has succeeded, the `then[]` handler is called with
  // the text, and we copy it into the `poemDisplay` box.
  .then[[text] => poemDisplay.textContent = text]
  // Catch any errors that might happen, and display a message
  // in the `poemDisplay` box.
  .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];

updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';

Khi chúng tôi đã nhận thành công blob của mình, chúng tôi chuyển nó vào hàm

updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';

Đôi khi, đặc biệt là trong mã cũ hơn, bạn sẽ thấy một API khác có tên là

fetch['products.json']
  .then[[response] => {
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    return response.json[];
  }]
  .then[[json] => initialize[json]]
  .catch[[err] => console.error[`Fetch problem: ${err.message}`]];

fetch['products.json']
  .then[[response] => {
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    return response.json[];
  }]
  .then[[json] => initialize[json]]
  .catch[[err] => console.error[`Fetch problem: ${err.message}`]];

fetch['products.json']
  .then[[response] => {
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    return response.json[];
  }]
  .then[[json] => initialize[json]]
  .catch[[err] => console.error[`Fetch problem: ${err.message}`]];

fetch['products.json']
  .then[[response] => {
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    return response.json[];
  }]
  .then[[json] => initialize[json]]
  .catch[[err] => console.error[`Fetch problem: ${err.message}`]];

const request = new XMLHttpRequest[];

try {
  request.open['GET', 'products.json'];

  request.responseType = 'json';

  request.addEventListener['load', [] => initialize[request.response]];
  request.addEventListener['error', [] => console.error['XHR error']];

  request.send[];

} catch [error] {
  console.error[`XHR error ${request.status}`];
}

Có năm giai đoạn này

1. Tạo một đối tượng

   fetch['products.json']
     .then[[response] => {
       if [!response.ok] {
         throw new Error[`HTTP error: ${response.status}`];
       }
       return response.json[];
     }]
     .then[[json] => initialize[json]]
     .catch[[err] => console.error[`Fetch problem: ${err.message}`]];
   

   0 mới
2. Gọi phương thức

   fetch['products.json']
     .then[[response] => {
       if [!response.ok] {
         throw new Error[`HTTP error: ${response.status}`];
       }
       return response.json[];
     }]
     .then[[json] => initialize[json]]
     .catch[[err] => console.error[`Fetch problem: ${err.message}`]];
   

   5 của nó để khởi tạo nó
3. Thêm một trình lắng nghe sự kiện vào sự kiện

   fetch['products.json']
     .then[[response] => {
       if [!response.ok] {
         throw new Error[`HTTP error: ${response.status}`];
       }
       return response.json[];
     }]
     .then[[json] => initialize[json]]
     .catch[[err] => console.error[`Fetch problem: ${err.message}`]];
   

   6 của nó, sự kiện này sẽ kích hoạt khi phản hồi đã hoàn tất thành công. Trong trình nghe, chúng tôi gọi

   // Call `fetch[]`, passing in the URL.
   fetch[url]
     // fetch[] returns a promise. When we have received a response from the server,
     // the promise's `then[]` handler is called with the response.
     .then[[response] => {
       // Our handler throws an error if the request did not succeed.
       if [!response.ok] {
         throw new Error[`HTTP error: ${response.status}`];
       }
       // Otherwise [if the response succeeded], our handler fetches the response
       // as text by calling response.text[], and immediately returns the promise
       // returned by `response.text[]`.
       return response.text[];
     }]
     // When response.text[] has succeeded, the `then[]` handler is called with
     // the text, and we copy it into the `poemDisplay` box.
     .then[[text] => poemDisplay.textContent = text]
     // Catch any errors that might happen, and display a message
     // in the `poemDisplay` box.
     .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
   

   9 với dữ liệu
4. Thêm một trình lắng nghe sự kiện vào sự kiện

   fetch['products.json']
     .then[[response] => {
       if [!response.ok] {
         throw new Error[`HTTP error: ${response.status}`];
       }
       return response.json[];
     }]
     .then[[json] => initialize[json]]
     .catch[[err] => console.error[`Fetch problem: ${err.message}`]];
   

   8 của nó, sự kiện này kích hoạt khi yêu cầu gặp lỗi
5. Gửi yêu cầu

Chúng tôi cũng phải cố gắng hết sức. bắt khối, để xử lý bất kỳ lỗi nào do

fetch['products.json']
  .then[[response] => {
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    return response.json[];
  }]
  .then[[json] => initialize[json]]
  .catch[[err] => console.error[`Fetch problem: ${err.message}`]];

fetch[url]
  .then[[response] => {
    if [!response.ok] {
      throw new Error[`HTTP error: ${response.status}`];
    }
    return response.blob[];
  }]
  .then[[blob] => showProduct[blob, product]]
  .catch[[err] => console.error[`Fetch problem: ${err.message}`]];

Hy vọng rằng bạn nghĩ Fetch API là một cải tiến về điều này. Đặc biệt, hãy xem cách chúng tôi phải xử lý lỗi ở hai nơi khác nhau

Bài viết này hướng dẫn cách bắt đầu làm việc với Fetch để tìm nạp dữ liệu từ máy chủ

Tuy nhiên, có rất nhiều chủ đề khác nhau được thảo luận trong bài viết này, điều này chỉ thực sự làm trầy xước bề mặt. Để biết thêm chi tiết về các chủ đề này, hãy thử các bài viết sau

Khách hàng có thể xem mã nút js không?

là khách hàng

Cách bảo vệ khách hàng

là khách hàng