在现代web应用程序中，RESTful API 是非常常见的架构模式。很多前端开发人员都会使用 RESTful API 与服务器交互数据。wanna-rest 是一个npm包，加载此包可以让你快速的进行 RESTful 调用。本篇文章将会为你介绍如何使用此npm包。
安装 wanna-rest
你可以使用 npm 安装 wanna-rest。在命令行工具上使用以下命令即可完成安装：
npm install wanna-rest
使用 wanna-rest
wanna-rest 提供了一种非常简单的方式来进行 RESTful API 请求。可以使用 wanna-rest 直接在前端代码中调用 RESTful API，使用下面的代码示例：
-- -------------------- ---- ------- ------ ---- ---- ------------- ------ ------- ------ ---- ---------------------------------------------- ---------------- -- - ---------------------- -------------- --- ------------------- --
在上面的代码中，我们使用了 ES6 模块导入 rest 函数，这个函数返回一个 Promise 对象。这个函数接收一个对象参数，该对象指定了请求的方法、URL、请求头和请求体等。在这个例子中，我们请求了https://jsonplaceholder.typicode.com/todos/1并打印了获取到的响应。
如果你需要指定请求头，你可以在 rest 函数调用时传递一个 JavaScript 对象，其中对象的属性名为请求头的名称，属性值为请求头的值，如下所示：
-- -------------------- ---- -------
------ ---- ---- -------------
------
------- ------
---- -----------------------------------------------
-------- -
---------------- ------- ----------
--------------- ------------------
-
---------------- -- -
----------------------
-------------- ---
-------------------
--深入学习 wanna-rest
wanna-rest 可以帮助你轻松的完成 RESTful API 请求，如果你需要更多的功能，wanna-rest 还提供了许多高级功能设置。
查询字符串参数
你可以在 URL 中添加查询字符串参数，如下所示：
-- -------------------- ---- -------
------
------- ------
---- ---------------------------------------------
------- -
------- --
------ --
------- --
-
--上面的例子中，我们使用了 params 属性将查询字符串传递到 URL 中。这将生成如下的 URL：
https://jsonplaceholder.typicode.com/posts?userId=1&_page=2&_limit=20
JSON 数据
在 POST 和 PUT 请求中，你可以使用 data 属性发送一个 JSON 数据对象，如下所示：
-- -------------------- ---- -------
------
------- -------
---- ---------------------------------------------
----- -
------ ------
----- ------
------- -
-
---FormData
你也可以在 POST 请求中使用 FormData 数据类型，如下所示：
-- -------------------- ---- ------- ----- -------- - --- ----------- ----------------------- ------ ---------------------- ---- ------ ------- ------- ---- ------------ ----- -------- ---
请求拦截器
你可以使用 requestInterceptor 属性提供一个回调函数来改变请求配置，如下所示：
rest.requestInterceptor = config => {
const token = localStorage.getItem('token');
if(token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
};在上面的例子中，我们通过使用 localStorage 存储用户token信息，然后在请求拦截器中添加到请求头中。
响应拦截器
你可以使用 responseInterceptor 属性提供一个回调函数来改变响应结果，如下所示：
rest.responseInterceptor = response => {
if(response.data.result === 'success') {
return response.data;
} else {
return Promise.reject(new Error(response.data.message));
}
}在上面的例子中，如果响应结果中的 result 属性为 success，那么响应对象的 data 属性将被返回，否则将会抛出一个包含 message 属性的错误对象。
总结
我们在本文中介绍了npm包wanna-rest的使用，并且详细介绍了如何使用该npm包调用 RESTful API。我们还介绍了wanna-rest提供的一些高级功能，这些功能可以帮助我们更加方便、快捷地完成 RESTful API 调用，增强了我们的开发效率。希望这篇文章对你有帮助，让你更好的掌握 wanna-rest。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728281e8991b448e8b44