Response: phương thức text()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Note: This feature is available in Web Workers.

Phương thức text() của giao diện Response nhận một luồng Response và đọc nó đến hết. Phương thức này trả về một promise giải quyết với một String. Phản hồi luôn được giải mã bằng UTF-8.

Cú pháp

text()

Giá trị trả về

Một Promise giải quyết với một String.

Ngoại lệ

AbortError DOMException

Yêu cầu đã bị hủy.

TypeError

Ném ra vì một trong các lý do sau:

Body phản hồi bị disturbed hoặc locked.
Có lỗi giải mã nội dung body, ví dụ do header Content-Encoding không đúng.

Trong ví dụ fetch text của chúng tôi (chạy trực tiếp), chúng ta có một phần tử <article> và ba liên kết (được lưu trong mảng myLinks.) Trước hết, chúng ta lặp qua tất cả và gán cho mỗi liên kết một trình xử lý sự kiện onclick để hàm getData() được chạy - với định danh data-page của liên kết được truyền vào làm đối số - khi một liên kết được nhấn.

Khi getData() chạy, chúng ta tạo một yêu cầu mới bằng constructor Request(), rồi dùng nó để fetch một file .txt cụ thể. Khi fetch thành công, chúng ta đọc một chuỗi từ phản hồi bằng text(), rồi đặt innerText của phần tử <article> bằng chính text đó.

const myArticle = document.querySelector("article");
const myLinks = document.querySelectorAll("ul a");

for (const link of myLinks) {
  link.onclick = (e) => {
    e.preventDefault();
    const linkData = e.target.getAttribute("data-page");
    getData(linkData);
  };
}

function getData(pageId) {
  console.log(pageId);
  const myRequest = new Request(`${pageId}.txt`);
  fetch(myRequest)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error, status = ${response.status}`);
      }
      return response.text();
    })
    .then((text) => {
      myArticle.innerText = text;
    })
    .catch((error) => {
      myArticle.innerText = `Error: ${error.message}`;
    });
}