前言
在前端开发中，发送请求是一个经常用到的功能，而使用现成的库可以减轻我们的工作量，提高开发效率。其中一个比较轻量级的 npm 包就是 minreq，它可以轻松方便地在前端发送 HTTP 请求。
安装和使用
通过 npm 安装 minreq：
npm install minreq --save
再在需要使用的地方导入：
import { req } from 'minreq';这里我们使用 ES6 的 import 语法导入了 minreq 的默认输出 req 方法。当然，你也可以直接引用具体的方法：
import { get, post, jsonp } from 'minreq';基本用法
发送 GET 请求
我们可以通过调用 req 方法来发送 GET 请求，其语法为：
req(method, url, [header], [data], [transformResponse], [errorHandler], [responseType], [timeout])
其中：
- method: 请求方法，这里取值为 GET；
- url: 请求地址；
- header: 请求头；
- data: 请求数据；
- transformResponse: 响应数据的转换函数；
- errorHandler: 错误处理函数；
- responseType: 响应数据类型；
- timeout: 超时时间，单位为毫秒。
比如我们要请求一个 API：
https://api.github.com/users/octocat
代码可以像这样：
req('GET', 'https://api.github.com/users/octocat').then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
});发送 POST 请求
发送 POST 请求也很简单，只需要将请求方法改为 POST，同时传入 data 参数即可。比如我们要发送一个 POST 请求到一个登录接口：
https://example.com/api/login
代码可以像这样：
req('POST', 'https://example.com/api/login', { 'Content-Type': 'application/json' }, {
username: 'admin',
password: '123456'
}).then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
});发送 JSONP 请求
发送 JSONP 请求也很简单，只需要使用 jsonp 方法即可。比如我们要请求一个名为 callback 的函数：
https://example.com/api?callback=callback
代码可以像这样：
jsonp('https://example.com/api', { callback: 'callback' }).then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
});进阶用法
自定义配置和响应拦截器
我们可以在请求前自定义一些配置，比如请求头，超时时间等等，同时也可以在响应后做一些处理，比如格式化数据等等。为了实现这一功能，我们需要使用 axios 可以提供的 AxiosRequestConfig 和 AxiosResponse 类型。
首先安装 axios：
npm install axios --save
然后修改我们的代码：
-- -------------------- ---- -------
------ ------- - ------ - ---- ---------
------ ------ - ------------------- ------------- - ---- --------
----- -------- - --------------
-------- -----------------------------
-------- -----
-------- -
------------------ --------
-
---
--------------------------------------------- -------------- -- -
----- ---- - --------------
-- ----
------ -----
-- ------- ---- -- -
---------------------
------ ----------------------
---
----- ------- - --------- ------------------- -- -
----- - ---- ------- ---- - - --------
----- ------ - -
----
------- ------ -- -------
----
--
------ -----------------
--
------ ------- --------这里我们使用了 axios 的 create 方法创建了一个 axios 实例，然后设置了 baseURL、timeout、headers 等配置。接下来我们使用 axios 的拦截器机制，处理了响应数据。最后我们导出了一个 request 方法，用来发送请求。
这时我们就可以使用 request 方法来发送请求了，比如：
-- -------------------- ---- ------- ------ ------- ---- ------------ --------- ---- ------------ ------- ----- -------------- -- - ------------------ -------------- -- - ------------------- ---
总结
使用 minreq 可以轻松方便地实现前端发送 HTTP 请求的功能。而进阶的用法则可以让我们更加灵活地处理请求和响应，提高代码复用率和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76569