前言
随着 PWA 技术的发展，越来越多的 Web 应用逐渐变成了离线可访问的 Progressive Web App，而这些应用的核心在于其数据交互能力。此时，我们需要使用一种更加现代化的数据请求方式 —— Fetch API。
本文将详细讲述 Fetch API 的使用方法，以及如何在 PWA 应用中处理数据请求。
Fetch API 介绍
Fetch API 是浏览器内置的（XHR）XMLHttpRequest 对象的替代方案，并且提供了更加强大而且现代化的功能，如：
- Promise 机制：对于异步操作具有更加友好的处理方式；
- 更加灵活的请求处理和响应处理方式；
- 更加友好的跨域处理方式。
基本用法
Fetch API 用起来非常简单，只需要执行如下语句即可：
fetch(url, options);
url 是需要请求的地址，options 是请求的配置参数。例如，我们向某个地址发起 GET 请求的代码可以如下所示：
fetch('https://api.github.com/users/hackjoe').then(function(response) {
return response.json();
}).then(function(json) {
console.log('data:', json);
}).catch(function(ex) {
console.log('parsing failed', ex);
})上述代码可以从 Github API 中获取仓库的基本信息，并打印出 JSON 格式的仓库信息。其中，fetch 返回一个 Promise 对象，并且这个 Promise 对象会在数据请求完成后进行回调处理。
我们可以把请求函数封装起来，这样就可以在请求的过程中精简部分工作量：
function getRepoInfo(username) {
return fetch('https://api.github.com/users/' + username)
.then((res) => res.json());
}使用方法：
getRepoInfo('hackjoe').then((info) => {
console.log(info);
});Fetch API 还提供了与响应相关的一些其他特性，例如：支持跨域请求、支持设置请求头、支持返回缓存等。这些特性都可以在 Fetch API 文档中找到。
请求拦截器
请求拦截器是 PWA 应用中常用的一种机制，其可以在请求发送之前对请求进行修改或筛选操作。Fetch API 提供了 Request 对象，可以在这个对象上添加或修改请求参数。例如，我们可以在请求参数中添加登录 token 的信息：
-- -------------------- ---- -------
----- ----- - -----------------------------------------
----- ------- - --- ---------
--------- -------------------
---------------- ------- - - -----
---
-------------- -------- ------ -------- ---------
------------------------ -
------ ----------------
--
-------------------- -
------------------
--------------------- -
-------------------- -------- ----
--这样就可以让你在 PWA 应用中操作更加安全，并且在请求发送的前提下，可以让应用与后端数据系统的联系变得更加良好。如果你需要更加灵活地处理请求拦截器，可以使用第三方请求拦截器库。例如 fetch-interceptor，它可以加入多个拦截器，并且提供了更加灵活的配置参数。
响应拦截器
响应拦截器是在收到服务端响应数据之后对数据进行处理的一种机制。例如，我们可以在处理响应时候添加错误处理机制，这样当出现错误信息的时候，会在客户端上展示错误相关的信息。
-- -------------------- ---- -------
----------------------------- -- -
-- -------------- -
----- ---------------------------
-
------ ----------------
---------------- -- -
-------------------
-------------- -- -
----------------
--Fetch API 还提供了其他一些诸如 Blob、ArrayBuffer、FormData 等用于不同场景的响应类型，可以根据自己的需求来选用合适的返回类型。
总结
本文介绍了使用 Fetch API 处理 PWA 应用中的数据请求的基本用法，并且详细讲述了请求拦截器和响应拦截器的应用。无论是基于 Fetch API 来开发 Web 应用，还是在开发 PWA 应用过程中遇到数据交互问题，Fetch API 都是一种非常优秀的方案。如果您在开发过程中遇到了任何问题，欢迎留言与我们交流！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64af981048841e9894baa08d