JavaScript Fetch API请求和响应拦截详解
我不吃饼干 人气:8引言
本文翻译自 Intercepting JavaScript Fetch API requests and responses
拦截器是可用于预处理或后处理 HTTP 请求的代码块,有助于全局错误处理、身份验证、日志记录等。在本文中,你将学习如何拦截 JavaScript Fetch API 请求。
拦截 HTTP 请求一般有两种事件:请求和响应事件。请求拦截器应该在发送实际 HTTP 请求之前执行,而响应拦截器应该在到达发出请求的应用程序代码之前执行。
在深入研究代码之前,我们需要了解一些重要的事情。首先,Fetch API 本身不支持拦截器。其次,在 Node.js 中使用 Fetch API 需要额外的包。
JavaScript Fetch API
首先,让我们介绍一些 Fetch API 的基础,例如语法:
const fetchResponsePromise = fetch(resource [, init])
resource
定义要获取的资源,该资源可以是 Request 对象,也可以是 URL。init
是一个可选对象,它将包含你想应用于此特定请求的任何自定义配置。
Fetch API 是基于 Promise 的。因此,当你调用 Fetch 方法时,你将得到一个 Promise 响应。在这里,它被称为 fetchResponsePromise
,如上面的示例所示。
默认情况下,Fetch 使用 GET
方法调用 API,如下所示:
fetch('https://jsonplaceholder.typicode.com/todos/1') .then((response) => response.json()) .then((json) => console.log(json));
下面是一个使用 Fetch 发送 POST
请求的示例:
fetch('https://jsonplaceholder.typicode.com/todos', { method: 'POST', body: JSON.stringify({ completed: false, id: 1, title: 'New Todo', userId: 1, }), headers: new Headers({ 'Content-Type': 'application/json; charset=UTF-8', }), }) .then((response) => response.json()) .then((json) => console.log(json));
POST
请求必须有 body
。 查看 Fetch 文档 了解更多详细信息。
实现拦截
有两种方法可以在 Fetch API 请求时添加拦截器:使用猴子补丁或者使用库 fetch-intercept。
对 Fetch 使用猴子补丁(monkey patching)
为任何 JavaScript 函数或方法创建拦截器的一种方法是对其进行猴子修补。猴子补丁是一种用自己的函数版本覆盖原始函数的方法。
让我们一步一步地看看如何使用猴子补丁为 Fetch API 创建拦截器:
const { fetch: originalFetch } = window; window.fetch = async (...args) => { let [resource, config ] = args; // request interceptor here const response = await originalFetch(resource, config); // response interceptor here return response; };
上面的代码使用自定义实现重写原始 Fetch 方法,并在其中调用原始 Fetch 方法。你可以使用这个样例代码来创建请求和响应拦截器。
请求拦截器
在下面的示例中,我们将创建一个简单的请求拦截器,用于更改一个请求示例的 URL:
const { fetch: originalFetch } = window; window.fetch = async (...args) => { let [resource, config ] = args; // request interceptor starts resource = 'https://jsonplaceholder.typicode.com/todos/2'; // request interceptor ends const response = await originalFetch(resource, config); // response interceptor here return response; }; fetch('https://jsonplaceholder.typicode.com/todos/1') .then((response) => response.json()) .then((json) => console.log(json)); // log // { // "userId": 1, // "id": 2, // "title": "quis ut nam facilis et officia qui", // "completed": false // }
这个 API 请求将从 https://jsonplaceholder.typicode.com/todos/2
获取数据,而不是 https://jsonplaceholder.typicode.com/todos/1
,并展示 ID 为 2
的 todo
数据。
注意: 请求拦截器最常见的用例之一是更改身份验证的 headers。
响应拦截器
响应拦截器将在 API 响应传递给实际调用者之前拦截它。让我们看看下面的代码:
const { fetch: originalFetch } = window; window.fetch = async (...args) => { let [resource, config] = args; let response = await originalFetch(resource, config); // response interceptor const json = () => response .clone() .json() .then((data) => ({ ...data, title: `Intercepted: ${data.title}` })); response.json = json; return response; }; fetch('https://jsonplaceholder.typicode.com/todos/1') .then((response) => response.json()) .then((json) => console.log(json)); // log // { // "userId": 1, // "id": 1, // "title": "Intercepted: delectus aut autem", // "completed": false // }
在上面的代码中,我们更改了 json
方法以返回一些自定义数据来替代原始数据。查看文档了解更多 可以更改的属性。
注意: response
只允许使用一次。因此,每次需要使用 response
时,都需要 克隆 response。
错误处理
通过检查 response.ok
和 response.status
的值,可以很容易地处理请求的错误。在下面的代码片段中,可以拦截 404 错误
const { fetch: originalFetch } = window; window.fetch = async (...args) => { let [resource, config] = args; let response = await originalFetch(resource, config); if (!response.ok && response.status === 404) { // 404 error handling return Promise.reject(response); } return response; }; fetch('https://jsonplaceholder.typicode.com/todos/1000000') .then((response) => response.json()) .then((json) => console.log(json)) .catch((error) => console.error(error));
Node.js
你可以在 Node.js 中使用相同的方法。然而,Node.js 原生不支持 Fetch API (尽管对 Fetch API 的原生支持将在 Node.js 的未来版本中提供)。现在,你需要安装 Node Fetch 包,然后对 fetch
方法使用猴子补丁。【译:Node18已经支持了!】
使用 fetch-intercept 库
如果你不喜欢做这些 dirty
的事情(双关语【译:我也不懂指什么?】) ,那么 fetch-intercept 库允许您使用更干净的 API 注册拦截器。您可以使用 npm 或 Yarn 来安装这个库,如下所示:
npm install fetch-intercept whatwg-fetch --save // or yarn install fetch-intercept whatwg-fetch
注意: fetch-intercept 只支持浏览器,不能在 Node.js 中工作。因此,它还需要使用 whatwg-fetch 作为依赖项。
通过下面的代码,我们可以实现与我们的猴子补丁示例相同的请求和响应拦截器:
import * as fetchIntercept from 'fetch-intercept'; const unregister = fetchIntercept.register({ request: function (url, config) { const modifiedUrl = `https://jsonplaceholder.typicode.com/todos/2`; return [modifiedUrl, config]; }, requestError: function (error) { return Promise.reject(error); }, response: function (response) { const clonedResponse = response.clone(); const json = () => clonedResponse .json() .then((data) => ({ ...data, title: `Intercepted: ${data.title}` })); response.json = json; return response; }, responseError: function (error) { return Promise.reject(error); }, }); fetch('https://jsonplaceholder.typicode.com/todos/1') .then((response) => response.json()) .then((json) => console.log(json)); // unregister interceptors unregister();
register
方法允许你为 Fetch API 请求注册拦截器。它接受一个带有 request
, requestError
, response
, 和 responseError
回调的对象。register
方法返回另一个可用于注销拦截器的方法。
Fetch API 本身不支持拦截器。但是,还有其他支持拦截器的 HTTP 请求库。看一下 Axios,它提供了开箱即用的功能。
总结
在本文中,我们介绍了什么是 JavaScript 拦截器,学习了如何通过给 Fetch API 使用猴子补丁和使用 fetch-intercept 库来创建拦截器。
拦截器最初由 Angular 引入,对于各种各样的用例都很有帮助,比如帮助处理全局错误、身份验证、日志记录等等。你可以使用本文描述的方法将拦截器添加到 JavaScript 应用程序中,但是,请记住在 Node.js 需要添加额外的依赖。
加载全部内容