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

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