Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/axetroy/wxapp-http
微信小程序的http模块，Tiny but Powerful
https://github.com/axetroy/wxapp-http
http request wx wxapp
Last synced: 3 months ago
JSON representation
微信小程序的http模块，Tiny but Powerful
- Host: GitHub
- URL: https://github.com/axetroy/wxapp-http
- Owner: axetroy
- License: mit
- Created: 2017-06-23T03:45:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-08T13:00:27.000Z (almost 6 years ago)
- Last Synced: 2024-10-11T20:13:54.225Z (3 months ago)
- Topics: http, request, wx, wxapp
- Language: JavaScript
- Homepage:
- Size: 2.34 MB
- Stars: 42
- Watchers: 6
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README-0.x.x.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# wxapp-http
[](https://travis-ci.org/axetroy/wxapp-http)
[](https://david-dm.org/axetroy/wxapp-http)
[](https://github.com/prettier/prettier)
[](https://badge.fury.io/js/wxapp-http)
微信小程序的http模块，机智得“绕过”最大5个http并发的限制.
## Installation
```bash
npm install wxapp-http
```
[example](https://github.com/axetroy/wxapp-http/tree/master/example)
## Features
- [x] 更优雅的API
- [x] http请求的拦截器
- [x] http请求的事件监听器
- [x] http请求返回promise
- [x] http请求队列化，规避小程序的并发限制
- [x] 自定义http请求的最高并发数量
TODO:
> 1.0.0正式版本将基于[@axetroy/event-emitter.js](https://github.com/axetroy/event-emitter.js) 事件管理将实现真正的发布/订阅者模式
## Usage
```javascript
// 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返回的结构体
```typescript
interface Response${
data: any,
errMsg: string,
header: Object,
statusCode: number
}
```
#### http.request
```typescript
Http.prototype.request = function(method:string, url:string, body?:Object | string="", headers?: Object={}, dataType?: String="json"): Promise{
}
```
#### http.get
```typescript
Http.prototype.get = function(url:string, body?:Object | string="", headers?: Object={}, dataType?: String="json"): Promise{
}
```
#### http.post
```typescript
Http.prototype.post = function(url:string, body?:Object | string="", headers?: Object={}, dataType?: String="json"): Promise{
}
```
...
#### 以及OPTIONS, HEAD, PUT, DELETE, TRACE, CONNECT 请求, 参数同上
### 拦截器
配置文件字段
```typescript
interface Config${
method: string,
url: string,
data: Object | string,
header: Object,
dataType: string
}
```
#### 请求拦截器
返回布尔值，如果为true，则允许发送请求，如果为false，则拒绝发送请求，并且返回的promise进入reject阶段
```typescript
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阶段
```typescript
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请求
#### 请求发出前
```typescript
Http.prototype.onRequest = function(func:(config: Config$)=> void): void{
}
http.onRequest(function(config){
console.log(`will send http request: `, config.url);
});
```
#### 请求成功后
```typescript
Http.prototype.onSuccess = function(func:(config: Config$, response: Response$)=> void): void{
}
http.onSuccess(function(config, response){
console.log(`http request done: `, config.url);
});
```
#### 请求失败后
```typescript
Http.prototype.onFail = function(func:(config: Config$, response: Response$)=> void): void{
}
http.onFail(function(config, response){
console.log(`http request fail: `, config.url);
});
```
#### 请求完成后，无论成功或者失败
```typescript
Http.prototype.onComplete = function(func:(config: Config$, response: Response$)=> void): void{
}
http.onComplete(function(config, response){
console.log(`http request complete: `, config.url);
});
```
#### 错误监听
```typescript
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请求.
```typescript
Http.prototype.clean = function() : void{
}
http.clean();
```
### 自定义最高并发数量
最高并发数量默认为5个
```javascript
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
```bash
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](https://github.com/axetroy/wxapp-http/blob/master/contributing.md)
## Contributors
| [
Axetroy](http://axetroy.github.io)
[💻](https://github.com/gpmer/gpm.js/commits?author=axetroy) 🔌 [⚠️](https://github.com/gpmer/gpm.js/commits?author=axetroy) [🐛](https://github.com/gpmer/gpm.js/issues?q=author%3Aaxetroy) 🎨 |
| :---: |
## License
The [MIT License](https://github.com/axetroy/wxapp-http/blob/master/LICENSE)