npm 包 fetchival 使用教程

简介

fetchival 是一个轻量级的基于 fetch 封装的 JavaScript 库，它能够简化前端开发中使用 fetch 进行网络请求的复杂度，同时提供了链式 API 风格、自动序列化和解析响应等便捷功能。本文将介绍如何使用 fetchival 库。

安装

可以通过 npm 安装 fetchival：

npm install fetchival

或者通过 CDN 引入：

<script src="https://unpkg.com/fetchival"></script>

使用方法

创建实例

首先需要创建一个 fetchival 实例来进行网络请求的发送。fetchival 构造函数的参数是请求的地址：

const api = new fetchival('/api');

当然，也可以传递一个完整的 URL：

const api = new fetchival('https://example.com/api');

发送 GET 请求

使用 get() 方法可以发送 GET 请求，其参数是 API 的路径：

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

在这个例子中，我们请求了 /api/users 路径并将响应打印到控制台上。

发送 POST 请求

使用 post() 方法可以发送 POST 请求，并且需要传递请求体：

api.post('/users', { name: 'John Doe', age: 30 })
  .then(response => console.log(response))
  .catch(error => console.error(error));

在这个例子中，我们向 /api/users 路径发送一个 POST 请求，并且传递了一个 JSON 对象作为请求体。

发送 PUT 请求

使用 put() 方法可以发送 PUT 请求，并且需要传递请求体：

api.put('/users/1', { name: 'John Doe', age: 30 })
  .then(response => console.log(response))
  .catch(error => console.error(error));

在这个例子中，我们向 /api/users/1 路径发送一个 PUT 请求，并且传递了一个 JSON 对象作为请求体。

发送 DELETE 请求

使用 delete() 方法可以发送 DELETE 请求：

api.delete('/users/1')
  .then(response => console.log(response))
  .catch(error => console.error(error));

在这个例子中，我们向 /api/users/1 路径发送一个 DELETE 请求。

链式调用

除了上述简单的 API，fetchival 还提供了链式调用的方式来发送网络请求。例如：

api.get('/users')
  .filter(user => user.age > 18)
  .sort((a, b) => a.age - b.age)
  .limit(10)
  .then(response => console.log(response))
  .catch(error => console.error(error));

在这个例子中，我们首先向 /api/users 路径发送一个 GET 请求，然后通过 filter() 方法过滤掉年龄小于等于 18 岁的用户，再通过 sort() 方法按照年龄从小到大排序，最后通过 limit() 方法限制结果数量为 10。最终打印筛选出来的用户数组。

错误处理

可以通过 .catch() 方法来捕获网络请求时可能发生的错误：

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

在这个例子中，如果网络请求失败，就会打印错误对象到控制台上。

自动序列化和解析响应

fetchival 还提供了自动序列化和解析响应的功能。例如，当服务器返回 JSON 格式数据时，可以直接在响应对象上访问解析后的 JavaScript 对象：

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

在这个例子中

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