uni-httpclient
适用于 uniapp 的 HttpClient. 如果这个库帮助了您,请您在github上给个star, 或者dcloud 插件市场上点个赞。
Update: 2020/10/14
-
新增
retryDelay
选项,重试间隔(RetryIntercepter
) -
新增
Task
,TaskSource
类,解决Promise的设计缺陷 - 修复
CancelToken
的设计问题
核心功能:
-
query
- get
- post
- form (post with applicaton/www-urlencoded)
- delete
- put
- upload
- download
-
拦截/intercepter
- query
- upload
- download
-
CancelToken 取消, 复刻在 .Net 中已经使用十几年的
CancellationToken
- ICancelSource
- ICancelToken
-
拦截器
- JwtTokenIntercepter Json Web Token 拦截器
-
AutoDomainIntercepter 自动添加域名的拦截器,用于将
/api
转化为http://localhost:8080/api
- StatusCodeIntercepter 将statuscode 小于200 或 大于等于400 的请求视为错误,抛出 StatusCodeError
-
TimeoutIntercepter 简单的实现 timeout,
该拦截器,注入或者链接一个现有的
CancelToken
来实现 -
RetryIntercepter 简单的实现 timeout,
该拦截器,注入或者链接一个现有的
CancelToken
来实现 - 数据模拟
- 自定义拦截器
使用方式
一、安装
- 通过 npm/yarn 安装
$> npm install uni-httpclient
- 或者通过Hbuild 导入或者从插件市场下载手动安装
二、配置
//===========新功能===========// 注意类型 HttpClient 和 实例 httpClient ; // 名字具体看你把该库放在哪 // setupDefaults 是 HttpClient 这个类的静态函数// 你必须配置以下内容才能将所有的拦截器都打开,如果不配置 其中某个比如 retryCount, 则重试拦截器将不会添加HttpClient.setupDefaults //=======自定义方式============= //1. 配置 在 main.ts 中配置; // 名字具体看你把该库放在哪
三、使用
;// 如果不喜欢 httpClient 这个词, 可以用 as 重命名// import { httpClient as http} from "uni-httpclient";httpClient.get`/api/user/info`.then
取消 / CancelToken 的使用
除了使用 timeout , 你可以手动使用 CancelToken
, 手动使用
CancelToken
无需添加
TimeoutIntercepter
,添加上也不受影响, 当同时使用时,
两者都会发生作用(但只会发生一次)。
;;httpClient.Post"/api/do",null,null,null,.then; // 需要取消的时候 cancelToken.cancel;
CancelToken
(需要了解部分typescript 知识)
详细解释
CanelToken
实现了 ICancelSource
和
ICancelToken
(这两个接口在 js中是不存在的,要了解这个必须了解
typescript interface 是什么,简单的说就是单纯的token 不能调用取消,只有
source 可以调用取消),
之所以说这个,是希望大家更具体的知道如何替换CancelToken
,
比如有一个 CancelToken
叫做 a
是传入的 , 还有一个
b
我们自己创建的, 当他们在一起时该怎么处理,首先我们不应该直接操作a
, 因为a
有自己的事件,而且可能传给了多个function,
正确的做法是 当
a
取消时,我们的b
也取消,如果a
没有取消,我们就操作我们的取消
// 入口
错误
我们的拦截器产生的错误,都是我们自己定义的类型, 可以使用 instanceof 来测试是否是特定的错误 如
httpClient.Get"/api/get".cache
StatusCodeIntercepter 产生的错误是 StatusCodeError, Cancel 产生的错误是 CancelError
模拟数据源
模拟数据源要使用自定义的拦截器,且应该将此拦截器放在第一个拦截器(不要让AutoDomainIntercepter发挥作用), 不懂Typescript 的同学可以将一下代码放到 https://www.staging-typescript.org/zh/play 来查看js版本
; // 使用 HttpClient.setupDefaults; HttpClient.intercepters.unshiftnew MyDataIntercepter // 使用unshif 将此拦截器放在最开始的时候
拦截器原理
请求 ---> 拦截器A -----> 拦截器B ----> .... ----> IHttpClientHander
|
处理请求(底层请求方法)
|
响应 <---- 拦截器A <----- 拦截器B <---- .... <--- IHttpClientHander
Powered by 金昇网络 如果这个库帮助到了您, 请再 github https://github.com/john0king/uni-httpclient 给个star