在前端开发中，经常需要进行网络请求。而现今多数的前端应用都采用了模块化开发，为了保证代码的可读性、可维护性，也为了避免因复杂的依赖关系导致的错误，很多开发者会选择通过 npm 来引入第三方库。
在前端网络请求的场景中，isomorphic-fetch 是一款十分实用的工具库，它可以让我们在浏览器端和服务端使用同一套 API 进行网络请求。对于使用 TypeScript 进行开发的开发者来说，可以使用 @types/isomorphic-fetch 来进行类型声明，以提高我们的代码健壮性。下面就让我们来看看如何使用 npm 包 @types/isomorphic-fetch。
安装 @types/isomorphic-fetch
首先，我们需要使用 npm 安装 @types/isomorphic-fetch，可以通过以下命令进行安装：
npm i -D @types/isomorphic-fetch
基本使用
当我们想要使用 isomorphic-fetch 完成一个 GET 请求时，我们可以按照以下方式进行：
-- -------------------- ---- -------
------ ----- ---- -------------------
-----------------------------------------------------------------------------------------------------
--------- -- -
------------------------
----------------------------
------ -----------
--
---------- -- ------------------
---------- -- --------------------从代码中可以看出，我们首先通过 import 将 isomorphic-fetch 引入到我们的代码中，然后我们使用 fetch 方法发起一个 GET 请求。当请求返回结果时，我们使用 .then 将结果打印到控制台上。当发生请求错误时，我们可以使用 .catch 捕获并处理错误。
常用方法
下面是一些常用的 isomorphic-fetch 方法：
fetch(url: RequestInfo, init?: RequestInit): Promise<response>
向指定的 url 发起网络请求。请求过程发生错误时，返回 Promise.reject()。而在请求成功时，将返回 Promise<Response> 对象。
其中，RequestInfo 参数可以接收字符串，也可以接收 Request 对象；而 RequestInit 对象则由以下几个属性组成：
- method: 请求方法，支持 GET、POST、PUT、DELETE 等，默认为 GET；
- headers: 请求头信息；
- body: 发送给服务器的内容。
Response 对象
在成功发起请求后，我们将会收到一个 Response 对象。Response 对象由以下几个属性和方法组成：
- ok: 表示请求是否成功的 bool 值；
- status: 表示 HTTP 状态码；
- statusText: 表示 HTTP 状态码描述信息；
- json(): 将 Response 对象转换成 json 格式；
- blob(): 将 Response 对象转换成 blob 格式；
- text(): 将 Response 对象转换成文本格式；
- clone(): 复制一个 Response 对象。
示例代码
下面是一个示例的 TypeScript 代码：
-- -------------------- ---- ------- ------ ----- ---- ------------------- --------- ---- - --- ------- ----- ------- ------ ------- - ----------------------------------------------------- --------- -- ---------- -- -------------- ---------- -- ----------------------- ---------- -- --------------------
从代码中可以看出，我们通过 fetch 方法向指定的链接发起了一个 GET 请求，并将请求结果转换成了 JSON 格式。当请求成功响应时，我们将名称打印在控制台上。当请求失败时，我们将错误信息打印在控制台上。
总结
isomorphic-fetch 是一个好用的网络请求库，可以让我们在浏览器端和服务端使用同一套 API 进行网络请求。在使用 TypeScript 进行开发时，我们可以通过 @types/isomorphic-fetch 来进行类型声明，以提高代码健壮性。在使用这个库时，我们需要注意请求发生错误时的处理，否则可能会影响到我们网站的用户体验。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/194681