npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@junc/wxapp-http

v3.2.3

Published

Http module for WeChat APP

Downloads

8

Readme

wxapp-http

Greenkeeper badge Build Status Dependency License Prettier Node npm version

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

sceenshot

Installation

npm install wxapp-http --save

example

Features

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

wxapp-XMLHttpRequest Web XMLHttpRequest implement for WeChat APP

wxapp-r2 r2 implement in Wechat App client

@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