npm 包 @nll/rxfetch 使用教程

介绍

在前端中经常需要进行 http 请求操作，一般使用的是 fetch 函数。但是 fetch 函数有时候使用起来不是很灵活，因此需要一些更加高效、灵活的库来进行操作。其中比较好用的一个库就是 @nll/rxfetch。

@nll/rxfetch 是一个基于 RxJS 的高效、灵活、易用的 http 请求库。不仅提供了 fetch 常用的 GET、POST 等方法，还提供了 getJSON, postJSON 等方法来方便的处理 JSON 数据。此外，@nll/rxfetch 还支持设置请求头、设置超时、设置请求逾期时间等。

安装

可以通过 npm 安装 @nll/rxfetch

npm install @nll/rxfetch --save

使用

首先需要导入 @nll/rxfetch 模块

import * as rxfetch from "@nll/rxfetch";

进一步，常见的使用方式如下

GET 请求

rxfetch.get(url, params?, options?)

其中，url 表示请求的地址；params 表示请求的查询参数；options 表示请求的设置项。示例代码如下：

rxfetch.get("https://example.com/get", {id: 123}).subscribe((res) => {
  console.log(res)
})

POST 请求

rxfetch.post(url, data?, options?)

其中，url 表示请求的地址；data 表示请求的数据，可以为 FormData、JSON、字符串等；options 表示请求的设置项。示例代码如下：

rxfetch.post("https://example.com/post", {name: "rxfetch"}).subscribe((res) => {
  console.log(res)
})

JSON 请求

rxfetch.postJSON(url, data?, options?)
rxfetch.putJSON(url, data?, options?)

其中，url 表示请求的地址；data 表示请求的数据；options 表示请求的设置项。示例代码如下：

rxfetch.postJSON("https://example.com/json", {name: "rxfetch"}).subscribe((res) => {
  console.log(res)
})

自定义设置

可以通过 options 选项来进行自定义设置，options 支持以下参数：

• timeout {number}：超时时间，单位为毫秒
• headers {object}：请求头，一般用于设置 token 等认证信息
• exceedTime {function}：逾期时间处理函数，自定义处理
• withCredentials {boolean}：是否跨域请求时发送 cookie，默认为 false
• responseType {string}：响应数据类型，可以是 "text"、"json"、"arraybufer" 等

示例代码如下：

rxfetch.post("https://example.com/custom", {name: "rxfetch"}, {
  headers: {
    Authorization: "Bearer xxxxx"
  },
  timeout: 5000
}).subscribe((res) => {
  console.log(res)
})

总结

使用 @nll/rxfetch 可以极大的提高前端的请求效率和灵活性，而且接口简单，易用。可以方便的搭配各种前端项目使用。

更多相关

• github 源码地址
• 官方文档

以上就是 @nll/rxfetch 的使用教程。希望能对你们有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e244a08