关于数据获取和 JavaScript Fetch API 的所有内容。

现代 Web 应用程序的命脉是数据。他们依靠从各种源渠道获取信息来提供动态和交互式体验。这就是 JavaScript Fetch API 的用处------一个强大的Tool，可以简化跨网络检索数据的方式。

发出GET请求

Fetch 是一个基于 promise 的 API。要发出获取请求，请使用 fetch() 函数。它需要两个参数 - 第一个参数是您要将请求发送到的 URL 端点。第二个参数是可选的，您可以添加其他属性，例如标题、正文等。

以下是使用 fetch() 函数的示例：

javascript 复制代码

const makeReq = async () => {
    const res = await fetch('https://dummyjson.com/todos');
    const json = await res.json();
    console.log(json);
}

makeReq();

在上面的示例中，我们向 dummyjson.com/todos发出 HTTP GET 请求。我们得到一个响应对象，其中包含我们需要的所有信息。json() 方法用于将响应对象的主体转换为 JSON。

带Headers的POST请求

默认请求类型是 GET。也可以提出其他类型的请求。以下是 POST 请求的示例，其中包含一些自定义标头和正文。

javascript 复制代码

fetch('https://dummyjson.com/todos/add', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept-Type': 'application/json'
    },
  body: JSON.stringify({
    todo: 'example todo',
    completed: false,
    userId: 5,
  })
})

method 属性用于定义 HTTP 请求的类型。它可以是 GET、POST、PUT、PATCH、DELETE 和 OPTION 。 body 包含您要发送的有效负载。我们将对象转换为字符串，因为主体只能是string、buffer或 blob。如果您发出 get 请求，则无法放置body。

headers 属性将接受所有标头。在我们的示例中包含两个标头。许多 api 会要求您将 api Key 或access token 放入headers中。

HTTP 状态代码

当我们从服务器收到 HTTP 响应时，它包含一个状态代码，指示请求是否成功。例如，状态码 404 表示您请求的资源不存在。状态代码 422 可能意味着您尚未提供服务器所需的内容。状态代码 401 表示您无权访问该资源。一般来说：

状态码在200-299之间表示成功。
400-499之间的状态码表示客户端错误，错误来自您这边。
500-599之间的状态码表示服务器端错误，来自服务器的错误。

注: 误状态代码，fetch() api 不会抛出任何错误

javascript 复制代码

const makeReq = async () => {
    const res = await fetch('https://dummyjson.com/todos');
    if (res.ok) {  // true for status codes <400
        const json = await res.json();
        console.log(json);
    }
    else {
        console.error("failed to fetch todos");
    }
}

makeReq();

取消Fetch请求

您可以使用 bortController取消获取请求。 bortController接口表示一个控制器对象，允许您在需要时中止一个或多个请求。它有一个返回 bortSignal对象的 signal属性。如果您在获取请求中传递此对象，则可以中止该请求。

例：

javascript 复制代码

const controller = new AbortController();

const start_download = async () =>
  await fetch("url", { signal: controller.signal });

const stop_download = async () => controller.abort();

// start download
const btn_startDownload = document.getElementById("#btn_start_download");
btn_startDownload?.onclick(() => {
  alert("starting download...");
  start_download()
    .then((data) => alert("download finished!!"))
    .catch(() => alert("can't download"));
});

// cancel download
const btn_cancelDownload = document.getElementById("#btn_cancel_download");
btn_cancelDownload?.onclick(() => {
  stop_download();
  alert("downloading stopped!!");
});

如果您运行此代码，您会注意到当您的下载被取消或请求被中止时，将显示"无法下载"消息。原因是当请求被中止时，会抛出一个名为 AbortError 的 DOMException。如果获取请求已完成，则不会引发任何错误。

我们可以修改代码，以便在请求成功中止时不显示任何错误消息。

javascript 复制代码

const btn_startDownload = document.getElementById("#btn_start_download");
btn_startDownload?.onclick(() => {
  alert("starting download...");
  start_download()
    .then((data) => alert("download finished!!"))
    .catch((error) => {
      // no error messages when request is aborted
      if (error.name === "AbortError") return;
      alert("cancelled download!");
    });
});

这就是有关 fetch api 的全部内容,感谢您的阅读~

关于数据获取和 JavaScript Fetch API 的所有内容。

发出GET请求

带Headers的POST请求

HTTP 状态 代码

取消Fetch请求

HTTP 状态代码