wxapp-http

微信小程序的http模块，机智得“绕过”最大5个http并发的限制.

Installation

npm install wxapp-http

example

Features

• 更优雅的API
• http请求的拦截器
• http请求的事件监听器
• http请求返回promise
• http请求队列化，规避小程序的并发限制
• 自定义http请求的最高并发数量

TODO:

1.0.0正式版本将基于@axetroy/event-emitter.js 事件管理将实现真正的发布/订阅者模式

Usage

// es6
import http from 'wxapp-http';

// commonJS
const http = require('wxapp-http').default;

http.get('https://www.google.com')
    .then(function(response){
      
    })
    .catch(function(error){
      console.error(error);
    });

API

Response

Response返回的结构体

interface Response${
  data: any,
  errMsg: string,
  header: Object,
  statusCode: number
}

http.request

Http.prototype.request = function(method:string, url:string, body?:Object | string="", headers?: Object={}, dataType?: String="json"): Promise<Response$>{
  
}

http.get

Http.prototype.get = function(url:string, body?:Object | string="", headers?: Object={}, dataType?: String="json"): Promise<Response$>{
  
}

http.post

Http.prototype.post = function(url:string, body?:Object | string="", headers?: Object={}, dataType?: String="json"): Promise<Response$>{
  
}

...

以及OPTIONS, HEAD, PUT, DELETE, TRACE, CONNECT 请求, 参数同上

拦截器

配置文件字段

interface Config${
  method: string,
  url: string,
  data: Object | string,
  header: Object,
  dataType: string
}

请求拦截器

返回布尔值，如果为true，则允许发送请求，如果为false，则拒绝发送请求，并且返回的promise进入reject阶段

Http.prototype.requestInterceptor = function(func:(config: Config$)=> boolean): void{
  
}

http.requestInterceptor(function(config){
  // 只允许发送https请求
  if(config.url.indexOf('https')===0){
    return true;
  }else{
    return false;
  }
});

响应拦截器

返回布尔值，如果为true，则返回的promise进入resolve阶段，如果为false，则进入reject阶段

Http.prototype.responseInterceptor = function(func:(config: Config$, response: Response$)=> boolean): void{
  
}

http.responseInterceptor(function(config, response){
  // 如果服务器返回null，则进入reject
  if(response && response.data!==null){
    return true;
  }else{
    return false;
  }
});

监听器

监听全局的http请求

请求发出前

Http.prototype.onRequest = function(func:(config: Config$)=> void): void{
  
}


http.onRequest(function(config){
  console.log(`will send http request: `, config.url);
});

请求成功后

Http.prototype.onSuccess = function(func:(config: Config$, response: Response$)=> void): void{
  
}

http.onSuccess(function(config, response){
  console.log(`http request done: `, config.url);
});

请求失败后

Http.prototype.onFail = function(func:(config: Config$, response: Response$)=> void): void{
  
}

http.onFail(function(config, response){
  console.log(`http request fail: `, config.url);
});

请求完成后，无论成功或者失败

Http.prototype.onComplete = function(func:(config: Config$, response: Response$)=> void): void{
  
}

http.onComplete(function(config, response){
  console.log(`http request complete: `, config.url);
});

错误监听

Http.prototype.onError = function(func:(error: Error)=> void): void{
  
}

http.onError(function(error){
  console.error(error);
});

生命周期

        requestInterceptor 
                ↓
            onRequest
            ↙    ↘
     onSuccess    onFail
            ↘    ↙
        responseInterceptor
                ↓
            onComplete
    (onError run in hole life circle)

清除请求队列

适用于小程序页面切换后，取消掉未发出去的http请求.

Http.prototype.clean = function() : void{
  
}

http.clean();

自定义最高并发数量

最高并发数量默认为5个

import {Http} from 'wxapp-http';

const http = new Http(3); // 设置最高并发3个

http.get('https://www.google.com')
    .then(function(response){
      
    })
    .catch(function(error){
      console.error(error);
    });

Contributing

git clone https://github.com/axetroy/wxapp-http.git
cd ./wxapp-http
yarn
yarn run start

1. 打开微信web开发者工具， 加载wxapp-http/example目录
2. 修改index.js

You can flow Contribute Guide

Contributors

Axetroy💻 🔌 ⚠️ 🐛 🎨

License

The MIT License