在前端开发中，网络请求是必不可少的一环。如何有效地进行网络请求，处理响应数据，是每个前端工程师需要掌握的技能之一。基于此，@jpmonette 开发了一个 npm 包 @jpmonette/req，帮助开发者更方便地进行网络请求。
安装和引入
@jpmonette/req 可以使用 npm 进行安装和引入。打开终端，输入以下命令：
npm install @jpmonette/req
在你的项目中，引入 @jpmonette/req：
import req from '@jpmonette/req';
发送请求
使用 @jpmonette/req 发送请求非常简单，只需要调用 req 函数，传入请求的 URL 即可：
req('https://jsonplaceholder.typicode.com/todos/1').then(res => {
console.log(res);
});处理响应数据
@jpmonette/req 的请求返回的数据类型为 JSON 格式，可以方便处理和解析。在请求成功后，可以直接通过 then 方法获取数据。
以下是一个简单的处理响应数据的示例：
req('https://jsonplaceholder.typicode.com/todos/1').then(res => {
console.log(res); // {"userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}
console.log(res.title); // delectus aut autem
});发送 POST 请求
发送 POST 请求也非常简单，只需要在 req 函数中传入请求数据即可。以下是一个简单的示例：
-- -------------------- ---- -------
----- ---- - -
------ ------
----- ------
------- -
--
------------------------------------------------- -
------- -------
----- ---------------------
-------- -
--------------- ------------------ --------------
-
----------- -- -
----------------- -- ------ ----
---发送带有查询参数的 GET 请求
如果要发送带有查询参数的 GET 请求，我们可以将查询参数添加到 URL 上即可。以下是一个简单的示例：
const queryString = '?userId=1';
req(`https://jsonplaceholder.typicode.com/todos/${queryString}`).then(res => {
console.log(res); // {"userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}
});错误处理
当请求失败时，@jpmonette/req 会返回一个错误信息，开发者可以根据错误类型进行相应处理。以下是一个处理错误的简单示例：
req('https://jsonplaceholder.typicode.com/todos/99999').catch(err => {
console.error(err); // TypeError: Failed to fetch
});总结
@jpmonette/req 的使用非常简单，同时支持 GET 和 POST 请求，并提供了数据解析、错误处理等基本功能。如果你正在处理 HTTP 请求，不妨试试 @jpmonette/req。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcf967216659e244e27