Làm cách nào để gửi yêu cầu đến máy chủ bằng JavaScript?

// 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ị 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';

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

Làm cách nào để gửi yêu cầu bằng JavaScript?

Chúng tôi có thể gửi dữ liệu đến máy chủ bằng yêu cầu GET không?

Làm cách nào để yêu cầu một URL trong JavaScript?

Làm cách nào để yêu cầu API trong JavaScript?