npm 包 fetch-api-wrapper 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要和服务器进行交互获得数据，而 fetch 是一个较为常用的 API，是一个用来获取资源的现代接口。但是，它需要开发者手动处理错误、设置请求头部等操作，使得代码会变得冗长繁琐。npm 包 fetch-api-wrapper 解决了这些问题，它是对 fetch API 进行封装并提供了一些额外的功能，使得调用速度更快、更方便、更易于测试等。

安装

通过 npm 安装：

npm install fetch-api-wrapper --save

使用方法

首先，使用 fetch-api-wrapper 需要引入它：

import { FetchApiWrapper } from 'fetch-api-wrapper';

发送请求

fetch-api-wrapper 封装的 API 提供了一些默认的请求方式，例如 get()、post()、put()、delete()、patch()。我们可以直接调用可以调用这些默认的方法来进行请求。

const api = new FetchApiWrapper('http://localhost:3000/api');

api.get('/posts')
  .then(response => console.log(response))
  .catch(error => console.error(error));

自定义请求

如果默认的请求方式不满足需求，我们可以通过 request() 方法进行自定义请求，例如：

-- -------------------- ---- -------
-------------
  ---- ---------
  ------- ------
  -------- -
    ---------------- ------- ----------
  --
--
-------------- -- ----------------------
------------ -- ----------------------

请求参数处理

使用 fetch-api-wrapper 可以更简便地处理请求参数：

处理查询参数

api.get('/posts', { page: 1, limit: 10 })
  .then(response => console.log(response))
  .catch(error => console.error(error));

处理请求正文

api.post('/posts', { title: 'Title', content: 'Content' })
  .then(response => console.log(response))
  .catch(error => console.error(error));

请求响应处理

fetch-api-wrapper 通过将 response.json() 封装到了一起，并提供了更简单的链式语法来处理响应结果。例如：

api.get('/posts', { page: 1, limit: 10 })
  .expectJson() // 检查响应是否为 JSON
  .expect(200) // 检查响应码
  .then(({ data }) => console.log(data))
  .catch(error => console.error(error));

请求错误处理

fetch-api-wrapper 提供了处理请求错误的方法。例如，调用 catch() 方法来捕获错误：

api.get('/posts/123456')
  .expect(404)
  .catch(error => console.error(error)); // 请求未找到

拦截器

使用拦截器，可以处理请求和响应进行全局控制。例如：

-- -------------------- ---- -------
----- --------- - ------

----- --- - --- ---------------------------------------------

----------------------------- ------- -- -
  ------------------------------- - ------- --------------
  ------ ----- --------
---

----------------------------------- -- -
  -- ---------------- -- ---- -
    ----- --- --------------
  -
  ------ ----------------
---

-----------------
  -------------- -- ----------------------
  ------------ -- ----------------------

总结

fetch-api-wrapper 是一个非常易用的库，它可以让我们更加方便地进行网络请求，封装许多常见的模式和功能，简化了大量繁琐的代码，相对于原生的 fetch API 更加友好。同时，fetch-api-wrapper 提供了很多高级的功能，例如拦截器、请求/响应拦截等，使得它成为自定义服务端 API 的最佳选择之一。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005584381e8991b448d5795