JavaScript 中 Fetch 是如何工作的

如何在 JavaScript 中使用 Fetch

我们在使用Fetch API获取 URL的数据时，最基本的用法只需要一个参数。当我们运行 Fetch 时，它会有一个返回值：

let fetchExample = fetch("https://fjolt.com").then((res) => {
    // Do something with res
});

Res包含一些很有意思的内置函数，如下：

• res.text() ： 返回 URL 的文本内容。如果是网站，则返回 HTML。
• res.json() ： 返回格式化的 JSON 数据。
• res.blob() : 返回 blob 数据。
• res.arrayBuffer()： 返回数组缓冲区数据
• res.formData() ： 返回 formData 数据。

下面是两个例子：

使用 JavaScript Fetch 获取网站的 HTML 内容

由于res.text()具有可以获取URL 的文本内容的功能，所以可以使用它来获取网站的整个 HTML 。一旦运行 res.text()，我们可以用另一个 then 捕获响应并在控制台记录它：

let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
    return data;
}); 
// Now contains our website's HTML.

如果链接不存在或发生错误，响应对象将返回错误。例如，找不到页面将返回 404，或者网关错误将返回 502。

使用 JavaScript Fetch 从链接中获取 JSON 内容