Fetch API 入门

发表 admin at 2024年8月26日

类别

未分类

标签

Fetch 是一种较新的、基于承诺的 API，它允许我们执行 Ajax 请求，而无需处理与XMLHttpRequest相关的所有麻烦。正如您将在本文中看到的，Fetch 非常易于使用和操作，并且大大简化了从 API 获取资源的过程。此外，它现在已在所有现代浏览器中得到支持，因此使用 Fetch 真的是一件轻而易举的事。

获取请求

让我们演示一个简单的 GET 请求，得到我们自己从JSONPlaceholder API中获取了一些虚拟数据：

fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(res => res.map(user => user.username))
  .then(userNames => console.log(userNames));

输出将是如下的用户名数组：

["Bret", "Antonette", "Samantha", "Karianne", "Kamren", "Leopoldo_Corkery", "Elwyn.Skiles", "Maxime_Nienow", "Delphine", "Moriah.Stanton"]

鉴于我们期望 JSON 响应，我们首先需要调用json()方法来转换回复对象变成我们可以与之交互的对象。text()如果我们期望 XML 响应，则可以使用它。

发布、放置和删除请求

要发出除GET之外的请求，请将对象作为第二个参数传递给 fetch 调用，其中包含要使用的方法以及任何所需的标头和请求正文：

const myPost = {
  title: 'A post about true facts',
  body: '42',
  userId: 2
}

const options = {
  method: 'POST',
  body: JSON.stringify(myPost),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('https://jsonplaceholder.typicode.com/posts', options)
  .then(res => res.json())
  .then(res => console.log(res));

JSONPlaceholder将附加 ID 的 POST 数据发回给我们：

Object {
  body: 42,
  id: 101,
  title: "A post about true facts",
  userId: 2
}

您会注意到，请求主体需要进行字符串化。您可以用于提取调用的其他方法包括删除，放，头和选项

错误处理

使用 Fetch API 进行错误处理时有一个问题（双关语？？？）：如果请求正确到达端点并返回，则不会抛出任何错误。这意味着错误处理并不像链接抓住在获取承诺链的末尾调用。

幸运的是，来自 fetch 调用的响应对象有一个好的属性，该属性将根据请求的成功与否而为 true 或 false。然后您可以使用Promise.reject()如果好的是错误的：

fetch('https://jsonplaceholder.typicode.com/postsZZZ', options)
  .then(res => {
    if (res.ok) {
      return res.json();
    } else {
      return Promise.reject({ status: res.status, statusText: res.statusText });
    }
  })
  .then(res => console.log(res))
  .catch(err => console.log('Error, with message:', err.statusText));

在上述示例中，我们的承诺将被拒绝，因为我们正在调用一个不存在的端点。链式 catch 调用将被命中，并输出以下内容：

"Error, with message: Not Found"

获取 + 异步/等待

由于 Fetch 是一个基于 Promise 的 API，因此使用异步函数是一个很好的选择，它能让你的代码更容易推理，看起来更同步。例如，这里有一个async/await函数，它执行一个简单的GET请求，并从返回的 JSON 响应中提取用户名，然后在控制台上记录结果：

async function fetchUsers(endpoint) {
  const res = await fetch(endpoint);
  let data = await res.json();

  data = data.map(user => user.username);

  console.log(data);
}

fetchUsers('https://jsonplaceholder.typicode.com/users');

或者，你可以从 async/await 函数中返回一个承诺，然后你就可以继续链接然后调用函数后调用：

async function fetchUsers(endpoint) {
  const res = await fetch(endpoint);
  const data = await res.json();

  return data;
}

fetchUsers('https://jsonplaceholder.typicode.com/users')
  .then(data => {
    console.log(data.map(user => user.username));
  });

呼唤json()返回一个承诺，所以在上面的例子中，当我们return data在异步函数中时，我们返回一个承诺。

然后，如果响应是好的为假，并像往常一样在承诺链中捕获错误：

async function fetchUsers(endpoint) {
  const res = await fetch(endpoint);

  if (!res.ok) {
    throw new Error(res.status); // 404
  }

  const data = await res.json();
  return data;
}

fetchUsers('https://jsonplaceholder.typicode.com/usersZZZ')
  .then(data => {
    console.log(data.map(user => user.website));
  })
  .catch(err => console.log('Ooops, error', err.message));

Ooops, error 404

Polyfills

如果您需要支持旧版浏览器（例如 Internet Explorer 11），则需要使用类似 Github 中的Fetch polyfill 。
如果您需要在 Node.js 中使用 Fetch，两个最受欢迎的选项是isomorphic-fetch和node-fetch。

浏览器支持

我可以使用 fetch 吗？各大浏览器对 fetch 功能的支持数据来自caniuse.com。