Fetch API是默认Javascript用于网络通讯的API，有了Fetch API你可以不用ajax, axios等库来做ajax请求了，不过它用起来跟这些库有着一些不同，需要注意。
本文着重来讲解如何在常见的情况下利用fetch api和async/await。你会了解如何获取API数据，如何处理错误和取消fetch请求。
1. 什么是Fetch API
fetch API用于做HTTP请求，例如get, post等，还可以用于上传和下载文件。开始请求用fetch这个方法：
const response = await fetch(resource[, options]);
这个方法接受两个变量，resource和options。
resource: 一个URL字符串或者请求对象。
options: 设置对象如方法，headers, body 等等。
fetch()开启一个请求并返回promise对象，当请求完成，回应会编程response对象，就是resolve, 如果请求失败会变成reject。这里你需要知道promise的基本知识。
2.aync/await如何跟fetch() API配合使用
async function fetchMovies() {
const response = await fetch('/movies');
// 等待资源的回应
console.log(response);
}
fetchMovies() 是一个异步方法，因为前面有async这个关键词。这里的await的意思是这个异步请求暂停直到请求完成。
让我们来看看这个response对象，如何把有用的信息从中提取出来。
这个response对象，通过await fetch()返回的是一个有着多种形态的数据，需要提取它的JSON对象。
async function fetchMoviesJSON() {
const response = await fetch('/movies');
const movies = await response.json();
return movies;
}
//上面的方法返回的还是一个Promise，所以我们还要进行进一步的处理。
fetchMoviesJSON().then(movies => {
movies;
});
response.json()方法是一个response对象上的提取JSON对象的方法，这个方法会返回一个promise对象，所以还要用await。
response对象返回了很多有用的方法来转换这些数据，但都是promise对象。
response.json() 返回的是JSON对象
response.text() 返回的是纯文本
response.formData() 返回的是formData()
response.blob() 返回blob(), 一个类似文件形式的原始数据
response.arrayBuffer()() 返回的是arrayBuffer()的二进制数据
3.处理fetch API错误
当我学习fetch()的时候，它在有服务器错误的时候也没有报错，例如服务器的404状态码。
async function fetchMovies404() {
const response = await fetch('/oops');
response.ok; // => false
response.status; // => 404
const text = await response.text();
return text;
}
fetchMovies404().then(text => {
text; // => '无此页面'
});
fetch()只有在请求没有生成或者没有响应的时候才会reject。这种情况通常会在网络有问题时才发生，例如没有网络，没有服务器响应等。
幸好response.ok会让你区分不同的HTTP响应状态。这个属性只有在状态码为200-299时返回true。在上一个请求中，response.ok是false，因为响应状态为404。
如果你想估计引起HTTP状态码的错误，就要避开200-299这个范围，用手动的方法来启动这个错误。
async function fetchMoviesBadStatus() {
const response = await fetch('/oops');
if (!response.ok) {
const message = `有错误产生: ${response.status}`;
throw new Error(message);
}
const movies = await response.json();
return movies;
}
fetchMoviesBadStatus().catch(error => {
error.message; // '一个404错误'
});
4. 取消fetch() API请求
不好的一点是fetch() API一旦开始不允许取消请求。你需要额外的工具AbortController。
连接fetch() API和AbortController需要三步：
// 第一步：实例化AbortController
const controller = new AbortController();
// Step 2: 让fetch知道controller.signal
fetch(..., { signal: controller.signal });
// Step 3: 用下面的方法来取消请求
controller.abort();
当请求开始之前，创建一个abort controller实例:
const controller = new AbortController();
当请求开始的时候，用options变量把controller.signal传入进去，fetch(url, { signal: controller.signal })，把signal这个属性设置成controller.signal。
最后如果你需要取消请求就调用controller.abort()方法。
例如，让我们创建2个控制fetch请求的按钮，第一个按钮是开始请求的按钮，第二个按钮是点击之后可以取消正在进行中的请求。
let controller = null;
fetchMoviesButton.addEventListener('click', async () => {
controller = new AbortController();
try {
const response = await fetch('/movies', {
signal: controller.signal
});
} catch (error) {
console.log('Fetch error: ', error);
}
controller = null;
});
cancelFetchButton.addEventListener('click', () => {
if (controller) {
controller.abort();
}
});
5. 同步多个请求
同步多个请求就是多个请求同时发起，只有当全部请求获得响应时才返回响应，我们可以用promise的Promise.all() 辅助方法。
下面我们来进行2个接口的请求，分别时分类和电影数据：
async function fetchMoviesAndCategories() {
const [moviesResponse, categoriesResponse] = await Promise.all([
fetch('/movies'),
fetch('/categories')
]);
const movies = await moviesResponse.json();
const categories = await categoriesResponse.json();
return [movies, categories];
}
fetchMoviesAndCategories().then(([movies, categories]) => {
movies; // fetched movies
categories; // fetched categories
}).catch(error => {
// 如果电影或者分类结果无法获取，那么就返回错误
});
await Promise.all([...]) 开始同时进行请求，等待到全部获得响应。
如果哪个响应失败了，并行请求会被reject并返回请求的错误。
如果你想把所有请求都完成，即使有些失败了也不管，那么就用这个方法：Promise.allSettled()
网友评论