JavaScript Fetch API简介
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
本文最初发表于attacomsian.com/blog。
Fetch API 是一个基于 Promise 的JavaScript API，用于在浏览器中发起异步 HTTP 请求，类似于 XMLHttpRequest (XHR)。与 XHR 不同的是，Fetch API 更简洁，它利用 Promise 提供了更强大、更灵活的功能集，用于从服务器获取资源。
Fetch 函数现在基本已经标准化，除了 IE 之外，所有现代浏览器都支持它。如果您需要支持包括 IE 在内的所有浏览器，只需将GitHub 发布的polyfill添加到您的项目中即可。
API 使用情况
使用 Fetch API 非常简单。只需将 URL（即要获取的资源的路径）传递给fetch()方法即可：
fetch('/js/users.json')
.then(response => {
// handle response data
})
.catch(err => {
// handle errors
});
我们将要检索的资源路径作为参数传递给该方法。它返回一个 Promise，该 Promise 会在资源完成时fetch()将响应传递给该方法。如果由于网络故障或其他原因导致请求未能完成，该方法会拦截错误。then()catch()
GET 请求
默认情况下，Fetch API 使用 GET 方法处理异步请求。让我们使用Reqres REST API，通过 GET 请求来检索用户列表：
fetch('https://reqres.in/api/users')
.then(res => res.json())
.then(res => {
res.data.map(user => {
console.log(`${user.id}: ${user.first_name} ${user.last_name}`);
});
});
上述请求会在控制台上打印以下内容：
1: George Bluth
2: Janet Weaver
3: Emma Wong
调用该fetch()方法会返回一个Promise。该 Promise 返回的响应是一个流对象，这意味着当我们再次调用json()该方法时，它会返回另一个 Promise。调用该json()方法表明我们期望的是一个 JSON 响应。如果您期望的是一个 XML 响应，则应该使用text()其他方法。
POST 请求
与Axios类似，Fetch 也允许在请求中使用任何其他 HTTP 方法：POST、PUT、DELETE、HEAD 和 OPTIONS。您只需在选项中设置相应method的body参数即可fetch()：
const user = {
first_name: 'John',
last_name: 'Lilly',
job_title: 'Software Engineer'
};
const options = {
method: 'POST',
body: JSON.stringify(user),
headers: {
'Content-Type': 'application/json'
}
}
fetch('https://reqres.in/api/users', options)
.then(res => res.json())
.then(res => console.log(res));
Reqres API 会将包含 ID 和创建时间戳的请求体数据返回给我们：
{
"first_name":"John",
"last_name":"Lilly",
"job_title":"Software Engineer",
"id":"482",
"createdAt":"2019-05-12T15:09:13.140Z"
}
删除请求
DELETE 请求与 POST 请求非常相似，区别在于 DELETE 请求body不需要填写任何参数：
const options = {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
}
fetch('https://reqres.in/api/users/2', options)
.then(res => {
if (res.ok) {
return Promise.resolve('User deleted.');
} else {
return Promise.reject('An error occurred.');
}
})
.then(res => console.log(res));
错误处理
由于fetch()该方法返回的是一个 Promise 对象，因此错误处理非常简单。我们可以使用catch()Promise 的 `reject` 方法来拦截请求执行过程中抛出的任何错误。但是，无论服务器返回什么响应，只要请求成功到达服务器并返回，就不会抛出任何错误。fetch()即使 HTTP 响应代码为 404 或 500，该方法返回的 Promise 也不会因 HTTP 错误而拒绝。
幸运的是，你可以使用ok响应对象的属性来检查请求是否成功：
fetch('https://reqres.in/api/users/22') // 404 Error
.then(res => {
if (res.ok) {
return res.json();
} else {
return Promise.reject(res.status);
}
})
.then(res => console.log(res))
.catch(err => console.log(`Error with message: ${err}`));
响应对象
该fetch()方法返回的响应对象包含有关异步调用的请求和响应的信息，包括标头、状态码和状态消息：
fetch('https://reqres.in/api/users')
.then(res => {
console.log(res.headers.get('content-type'));
console.log(res.headers.get('expires'));
console.log(res.status);
console.log(res.ok); // shorthand for `status` between 200 and 299
console.log(res.statusText);
console.log(res.redirected);
console.log(res.type);
console.log(res.url);
});
您可以通过以下几种方式访问 Fetch API 的响应正文：
json()返回正文为 JSON 对象text()返回字符串形式的正文。blob()返回对象为 Blob 对象formData()返回主体作为 FormData 对象arrayBuffer()返回主体作为 arrayBuffer 对象
所有这些方法都会返回一个 Promise 对象。以下是一个方法示例text()：
fetch('https://reqres.in/api/unknown/2')
.then(res => res.text())
.then(res => console.log(res));
上述网络调用的输出将是一个 JSON 字符串：
'{"data":{"id":2,"name":"fuchsia rose","year":2001,"color":"#C74375","pantone_value":"17-2031"}}'
获取和异步/等待
由于 Fetch 是一个基于 Promise 的 API，我们可以更进一步，使用最新的 ES2017 async/await语法，使我们的代码更简洁，看起来更像同步代码：
const fetchUsers = async () => {
try {
const res = await fetch('https://reqres.in/api/users');
if (!res.ok) {
throw new Error(res.status);
}
const data = await res.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
fetchUsers();
结论
以上就是关于 JavaScript Fetch API 的全部内容。它相比之前的版本有了巨大的改进，XMLHttpRequest拥有易于使用的界面，并且在获取资源（即使是跨网络）方面表现出色。Fetch API 受所有现代浏览器支持，因此除非您需要支持 IE，否则无需使用任何 polyfill。
✌️ 我撰写关于现代 JavaScript、Node.js、Spring Boot以及所有Web 开发相关内容的文章。订阅我的电子报，每周获取 Web 开发教程和实用技巧。
喜欢这篇文章吗？ 请在Twitter上关注@attacomsian。您也可以在LinkedIn和DEV上关注我。
文章来源：https://dev.to/attacomsian/introduction-to-javascript-fetch-api-4f4c