扫一扫,手机访问
15194118449

做小程序的库 uni-httpclient v1.2.7 版本更新了

发表日期:2020-09-19 09:40 文章编辑:John0King 浏览次数:616
DCloud 插件市场: https://ext.dcloud.net.cn/plugin?id=2571
npm 地址: https://www.npmjs.com/package/uni-httpclient
github 地址: https://github.com/John0King/uni-HttpClient

如果这个库帮助到了您,请给个star  https://github.com/John0King/uni-HttpClient 

适用于 uniapp 的 HttpClient.

Update: 2020/9/17

  • 新增 RetryIntercepter 出错重试
  • 新增 HttpClient.setupDefaults(option) 来一次性启用所有的拦截器
  • 修复 使用@路径 导致的 定义文件无法使用问题
  • 新增 demo
  • 修复 拦截器管道无法重复调用的问题 await next(request) 可以调用多次了,详情请查看 RetryIntercepter

核心功能:

  • [x] query
    • [x] get
    • [x] post
    • [x] form (post with applicaton/www-urlencoded)
    • [x] delete
    • [x] put
  • [x] upload
  • [x] download
  • [x] 拦截/intercepter
    • [x] query
    • [x] upload
    • [x] download
  • [x] CancelToken 取消, 复刻在 .Net 中已经使用十几年的 CancellationToken
    • [x] ICancelSource
    • [x] ICancelToken
  • 拦截器
    • [x] JwtTokenIntercepter Json Web Token 拦截器
    • [x] AutoDomainIntercepter 自动添加域名的拦截器,用于将 /api 转化为 http://localhost:8080/api
    • [x] StatusCodeIntercepter 将statuscode 小于200 或 大于等于400 的请求视为错误,抛出 StatusCodeError
    • [x] TimeoutIntercepter 简单的实现 timeout, 该拦截器,注入或者链接一个现有的 CancelToken 来实现
    • [x] RetryIntercepter 简单的实现 timeout, 该拦截器,注入或者链接一个现有的 CancelToken 来实现
    • [x] 数据模拟
    • [x] 自定义拦截器

使用方式

//===========新功能===========
// 注意类型 HttpClient 和 实例 httpClient 
import { HttpClient} from "uni-httpclient"; // 名字具体看你把该库放在哪

// setupDefaults 是 HttpClient 这个类的静态函数
// 你必须配置以下内容才能将所有的拦截器都打开,如果不配置 其中某个比如 retryCount, 则重试拦截器将不会添加
HttpClient.setupDefaults({
    timeout:15,
    retryCount:1, // 建议重试1次就好
    statusCodeError:true,
    baseUrl:"http://localhost:500/api/"
})

//=======自定义方式=============

//1. 配置 在 main.ts 中配置
import { HttpClient} from "uni-httpclient"; // 名字具体看你把该库放在哪
const domainIntercepter = new AutoDomainIntercepter((url)=>{
    //url 为请求url, 可以根据url添加自己逻辑, 
    //比如 /api 映射到 api.com,  /v2 映射到 v2.api.com

    return "http://localhost:8080"
})
const jwtTokenIntercepter = new JwtTokenIntercepter((url)=>{
    // 因为拦截器会按顺序执行,所以此处的url已经是完整的url,
    // 在这里可以 url 参数 给不同的域名/路径追加不同的token
    let domain = "*"
    if (url.startWith("http://a.example.com"){
        domain = "a"
    }
    else if ( url.startWith("http://b.example.com")){
        domain = "b";
    }
    // tokenStorage 是一个自己实现的类,用来管理token
    return tokenStorage.getToken(domain);
})
httpClient.intercepters.push(new TimeoutIntercepter( 20 )); // 添加 使用 timeout 参数的必备拦截器, 可以不填,填上则未全局超时, 
//记得在 下载和上传 api上 利用 preventTimeout:true 来阻止该拦截器发生作用,(上传和下载是相对比较耗时的操作)
HttpClient.intercepters.push(domainIntercepter)
HttpClient.intercepters.push(jwtTokenIntercepter)

使用

import { httpClient as http } from "uni-httpclient";
http.get<any>(`/api/user/info`)
.then(r=>{
    // 处理返回的数据
})

取消 / CancelToken 的使用

除了使用 timeout , 你可以手动使用 CancelToken, 手动使用 CancelToken 无需添加 TimeoutIntercepter,添加也不受影响, 当同时使用时, 两者都会发生作用。

import {CancelToken } from "我们的库地址";
let cancelToken = new CancelToken();
httpClient.Post("/api/do",null,null,null,{ cancelToken: cancelToken })
.then(x=> {      });

// 需要取消的时候

cancelToken.cancel();

错误

我们的拦截器产生的错误,都是我们自己定义的类型, 可以使用 instanceof 来测试是否是特定的错误 如

httpClient.Get("/api/get")
.cache(e=>{
  if(e instanceof StatusCodeError){
    ....
  }
  else if (e instanceof CancelError){
    ...
  }
})

StatusCodeIntercepter 产生的错误是 StatusCodeError, Cancel 产生的错误是 CancelError

模拟数据源

模拟数据源要使用自定义的拦截器,且应该将此拦截器放在第一个拦截器(不要让AutoDomainIntercepter发挥作用), 不懂Typescript 的同学可以将一下代码放到 https://www.staging-typescript.org/zh/play 来查看js版本

import {
    HttpClientIntercepter,
    IntercepterRequestContext,
    IntercepterResponseContext,
    IntercepterDelegate
} from "@/intercepter";
export class MyDataIntercepter implements HttpClientIntercepter {
    constructor() { }

    handle(request: IntercepterRequestContext, next: IntercepterDelegate): Promise<IntercepterResponseContext> {
        return new Promose<IntercepterResponseContext>((resove,reject)=>{
          setTimeout(()=>{
            if(request.url == "/api/api1"){
              resove({
                httpClient: null ,
                httpClientHander: null,
                statusCode: 200,
                data: { /*您的数据*/ },
                header: {},
                pipeOptions:request.pipeOptions
              })
            }
            else if(){
              //......
            }
            else{
              reject(new StatusCodeError(400))
            }
            
          }, 2000); // 延时两秒
        });
        // 只要你不调用 next , 就不会往下执行,你随时可以阻止往下执行
    }
}

// 使用

HttpClient.setupDefaults({ 
  retryCount: 1,
  timeout:15,
  statusCodeError:true,
  baseUrl:"https://localhost:5001"
 });
 HttpClient.intercepters.unshift(new MyDataIntercepter()) // 使用unshif 将此拦截器放在最开始的时候

拦截器原理

请求 --->  拦截器A   -----> 拦截器B ----> .... ----> IHttpClientHander
                                                  |
                                         处理请求(底层请求方法)
                                                  | 
响应 <----  拦截器A <-----  拦截器B  <----  .... <--- IHttpClientHander

Powered by 金昇网络 如果这个库帮助到了您, 请再 github https://github.com/john0king/uni-httpclient 给个star

相关资讯
济南做网站,济南做公众号,济南做小程序 首选金昇网站
金昇网站是一家在济南做网站、公众号、小程序的公司