在前端开发中，调用后端 API 是必不可少的一项工作。而要在前端中调用后端的接口则需要使用 http 客户端。在这里我们介绍一个轻量级的 npm 包——tiny-http-client。该包不仅体积小巧，而且使用简单，是一个非常方便的工具。
tiny-http-client 的安装
你可以通过 npm 管理工具进行安装。只需要在命令行键入以下指令：
npm install tiny-http-client
安装完成后，你就可以在你的项目中使用 tiny-http-client 了。
使用示例
接下来我们通过一个使用示例，帮助大家更好的了解使用过程。
首先，我们需要创建一个新的 js 文件，例如 index.js。
接着，在该文件中引入 tiny-http-client 模块：
const httpClient = require('tiny-http-client');然后，通过配置创建一个 httpClient 实例：
const client = httpClient({ baseURL: 'http://localhost:8080' });其中，baseURL 是后端服务的访问地址，我们将其设置为了 'http://localhost:8080'。
接下来，我们就可以通过该实例调用后端 API 接口了。
比如，我们现在要调用一个 GET 接口，并传入参数，请求示例如下：
client.get('/test', { id: 1 })
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});以上代码中，我们使用了 GET 请求方式，请求地址是 '/test'，并且通过传入参数 '{ id: 1 }'。
请求成功后，将返回 response，其中 res.data 即为返回值。
使用指南
在使用 tiny-http-client 的过程中，我们有一些需要注意的地方：
设置请求头
在发送请求之前，可能需要设置请求头。我们可以通过以下代码进行设置：
client.defaults.headers.common['Authorization'] = AUTH_TOKEN;
其中，AUTH_TOKEN 为你的认证 token。
使用拦截器
如果你需要对请求或响应进行拦截和处理，可以使用拦截器。例如，我们需要在每次请求发送前将访问地址改为我们的代理地址，并在响应返回时将数据转化为 json 格式，示例代码如下：
-- -------------------- ---- ------- ---------------------------------------- -- - -- ----------- ---------- - ----------------------- - ----------- ------ ------- -- ------- -- - -- --------- ------ ---------------------- --- ------------------------------------------- -- - -- --------- ------------- - -------------------------- ------ --------- -- ------- -- - -- --------- ------ ---------------------- ---
这样，每次发送请求前，访问地址都会改为 'http://localhost:3000'，并且在接收到响应之后，将响应的数据转化为 json 格式。
总结
通过以上的介绍，我们可以看到 tiny-http-client 是一个非常方便的工具。只需要进行简单的配置，就可以在前端中轻松调用后端 API 接口。同时，与其他 http 客户端相比，tiny-http-client 具有更小的体积，也更加易于上手使用。
希望这篇文章对大家能够有一定的指导意义，也欢迎大家使用和反馈该 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005519181e8991b448cee87