在现代互联网开发中，前后端分离是一种常用的方法。前端往往需要向后端请求数据，这就需要用到网络请求库，而 fetch 是现代前端最常用的网络请求 API 之一。但是，由于 fetch API 的一些限制，比如缺少对请求状态的监控和错误处理，很多时候我们需要使用一些第三方的库来增强 fetch 的能力。

在这方面，@rgssup/fetch-plus 是一款非常不错的 npm 包，它提供了一系列的扩展和改进，使得 fetch 应用得更为灵活和便捷。本文将针对前端开发者，介绍 @rgssup/fetch-plus 的使用方法。

安装

可以使用 npm 或 yarn 进行安装，具体方法如下：

npm install @rgssup/fetch-plus --save

或者：

yarn add @rgssup/fetch-plus

使用方法

引入

在需要使用的 js 文件中，使用以下语法引入：

import fetchPlus from '@rgssup/fetch-plus';

基本用法

使用 fetchPlus，我们可以向服务器发送 GET 和 POST 请求，其基本使用方法如下：

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

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

其中，url 表示请求的地址，params 表示请求的参数对象，options 表示可配置的其他选项。

参数

params

params 参数是一个普通的 js 对象，表示请求的参数。例如：

const params = {
  name: '张三',
  age: 18,
  gender: 'male'
};

options

options 参数也是一个普通的 js 对象，表示其他的可配置选项。常用的有以下几个：

headers：请求头部信息。
timeout：请求超时时间，单位是毫秒。
withCredentials：是否开启跨域请求带 cookie。
responseType：服务器返回数据类型，可以是 text、json、blob 等。如果不设置，则默认为 json。

例如：

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

响应

fetchPlus 返回 Promise 对象，可以通过 then 和 catch 方法处理响应：

fetchPlus.get(url, params, options).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error.message);
});

其中，response 对象包含以下几个属性：

data：响应数据对象。
status：响应状态码。
statusText：响应状态说明。
headers：响应头部信息。

请求拦截器

可以通过 interceptors 属性添加请求拦截器。例如：

fetchPlus.interceptors.request.use(config => {
  console.log('发送请求：', config);
  return config;
});

响应拦截器

可以通过 interceptors 属性添加响应拦截器。例如：

fetchPlus.interceptors.response.use(response => {
  console.log('接收响应：', response);
  return response;
});

示例

下面是一个简单的示例，展示如何使用 fetchPlus 发送 GET 请求：

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

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

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

以上就是 @rgssup/fetch-plus 的基础使用方法，希望对于前端开发者有所帮助。

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

背景

安装