简介
在前端开发中，向后端请求数据是常见的操作，而 fetch 是现代浏览器提供的一种请求方式，它支持 Promise，能更好地处理异步请求，也有更加简洁的 API，已经逐渐取代了 jQuery 中的 $.ajax。而 fetch-api-rest 是一个在 fetch 的基础上封装的 npm 包，它能够更方便地请求 REST API 接口，本文将介绍使用 fetch-api-rest 的详细教程。
安装
首先，我们要安装 fetch-api-rest 这个 npm 包。可以使用以下命令进行安装：
npm install fetch-api-rest
引入
在使用 fetch-api-rest 前，需要先引入它。可以使用以下代码：
import { FetchApi } from 'fetch-api-rest';也可以使用以下代码：
const { FetchApi } = require('fetch-api-rest');使用
使用 fetch-api-rest 可以十分方便的请求 REST API 接口。下面我们将以访问 http://example.com/api/users 接口为例，详细介绍如何使用 fetch-api-rest。
GET 请求
使用 fetch-api-rest 发送 GET 请求非常简单，只需要使用 get 方法即可：
const fetchApi = new FetchApi('http://example.com');
fetchApi.get('/api/users').then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});上述代码中，我们首先创建了一个 fetchApi 对象，并指定了 API 的基础 URL 为 http://example.com。接着我们使用 get 方法发送一个 GET 请求，指定了接口路径为 /api/users。当请求成功时，我们可以在 then 回调中获取到响应内容，而在请求失败时，则可以在 catch 回调中获取到错误信息。
POST 请求
使用 fetch-api-rest 发送 POST 请求同样很简单，只需要使用 post 方法即可：
-- -------------------- ---- ------- ----- -------- - --- ------------------------------- --------------------------- - ----- ------ ---- -- ----------- -- - ----------------- ------------ -- - ------------------- ---
在这段代码中，我们使用 post 方法发送一个 POST 请求，同样指定了接口路径为 /api/users。在请求体中我们传递了一个对象，包含了用户的名称与年龄信息。当请求成功时，我们可以在 then 回调中获取到响应内容，而在请求失败时，则可以在 catch 回调中获取到错误信息。
PUT 请求
使用 fetch-api-rest 发送 PUT 请求同样很简单，只需要使用 put 方法即可：
-- -------------------- ---- ------- ----- -------- - --- ------------------------------- ---------------------------- - ----- -------- ---- -- ----------- -- - ----------------- ------------ -- - ------------------- ---
在这段代码中，我们使用 put 方法发送一个 PUT 请求，指定了接口路径为 /api/users/1，这里的 1 表示用户的 ID。在请求体中我们同样传递了一个对象，包含了用户的名称与年龄信息。当请求成功时，我们可以在 then 回调中获取到响应内容，而在请求失败时，则可以在 catch 回调中获取到错误信息。
DELETE 请求
使用 fetch-api-rest 发送 DELETE 请求同样很简单，只需要使用 delete 方法即可：
const fetchApi = new FetchApi('http://example.com');
fetchApi.delete('/api/users/1').then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});这里我们使用 delete 方法发送一个 DELETE 请求，指定了接口路径为 /api/users/1，这里的 1 同样表示用户的 ID。当请求成功时，我们可以在 then 回调中获取到响应内容，而在请求失败时，则可以在 catch 回调中获取到错误信息。
总结
fetch-api-rest 可以帮助我们更方便地使用 fetch 请求 REST API 接口，在前端开发中使用十分方便。本文介绍了 fetch-api-rest 的安装、引入以及使用方法，并以示例展示了如何使用它进行 GET、POST、PUT 以及 DELETE 请求。通过本文的学习，读者应该能够更加方便地使用 fetch-api-rest 这个 npm 包了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557cc81e8991b448d4d5b