3.1.0 • Published 7 years ago

wxapp-http v3.1.0

Weekly downloads
200
License
ISC
Repository
github
Last release
7 years ago

wxapp-http

Greenkeeper badge Build Status Dependency License Prettier Node npm version

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

sceenshot

Installation

npm install wxapp-http --save

example

Features

  • 使用typescript构建,更严谨
  • 更优雅的API
  • http请求的拦截器,轻松定义你的http请求
  • http请求的事件监听器, 发布订阅者模式(基于@axetroy/event-emitter.js)
  • http请求返回promise
  • http请求队列化,规避小程序的并发限制
  • 自定义http请求的最高并发数量

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

http.request

interface Http${
    request(
      method: string,
      url: string,
      body: Object | string,
      header: Object,
      dataType: string
    ): Promise<any>;
}

http.get

interface Http${
    get(
      url: string,
      body?: Object | string,
      header?: Object,
      dataType?: string
    ): Promise<any>;
}

http.post

interface Http${
    post(
      url: string,
      body?: Object | string,
      header?: Object,
      dataType?: string
    ): Promise<any>;
}

...

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

相关接口定义

拦截器

配置文件字段

interface Config$ {
  url: string;
  method: string;
  data: Object | string;
  header: HttpHeader$;
  dataType: String;
}

请求拦截器

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

interface Http${
  setRequestInterceptor(interceptor: (config: HttpConfig$) => boolean): Http$;
}

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

响应拦截器

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

interface Http${
  setResponseInterceptor(
    interceptor: (config: HttpConfig$, response: Response$) => boolean
  ): Http$;
}

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

监听器

监听全局的http请求, 事件基于@axetroy/event-emitter.js

declare class EventEmitter {
  constructor();

  on(event: string, listener: (...data: any[]) => void): () => void;

  emit(event: string, ...data: any[]): void;

  on(event: string, listener: (...data: any[]) => void): () => void;

  off(event: string): void;

  clear(): void;

  emitting(event: string, dataArray: any[], listener: Function): void;
}

class Http extends EventEmitter{
  
}

// example
http.on('request', function(config){
  
});

http.on('success', function(config, response){
  
});

http.on('fail', function(config, response){
  
});

http.on('complete', function(config, response){
  
});

事件: request, success, fail, complete

参数: config, response

查看更多事件API

事件触发顺序

        requestInterceptor 
                ↓
            onRequest
            ↙    ↘
     onSuccess    onFail
            ↘    ↙
        responseInterceptor
                ↓
            onComplete

清除请求队列

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

interface Http${
  lean(): void;
}

// example
http.clean();

自定义一个新的Http实例

interface HttpConfig$ {
  maxConcurrent: number;
  timeout: number;
  header: HttpHeader$;
  dataType: string;
}

interface Http${
  create(config: HttpConfig$): Http$;
}

// example
import Http from 'wxapp-http';

const newHttp = Http.create();

自定义最高并发数量

最高并发数量默认为5个

import Http from 'wxapp-http';

const http = Http.create({maxConcurrent:3}); // 设置最高并发3个

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

自定义全局的header

每个http请求,都会带有这个header

import Http from 'wxapp-http';

const http = Http.create({
  maxConcurrent: 5,
  header: {
    name: 'axetroy'
  }
});

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

Related

wxapp-fetch fetch API implement for WeCHat App

@axetroy/event-emitter.js A Javascript event emitter implementation without any dependencies. only 1.4Kb

Contributing

git clone https://github.com/axetroy/wxapp-http.git
cd ./wxapp-http
yarn
yarn run start
  1. 打开微信web开发者工具, 加载wxapp-http/example目录
  2. 修改index.ts

欢迎PR.

You can flow Contribute Guide

Contributors

Axetroy💻 🔌 ⚠️ 🐛 🎨

License

The MIT License

3.1.0

7 years ago

3.0.0

7 years ago

2.0.0

7 years ago

1.0.0

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.1

8 years ago

0.1.0

8 years ago