120 lines
3.0 KiB
Markdown
120 lines
3.0 KiB
Markdown
# miniprogram-queue [](https://npmjs.com/package/miniprogram-queue)
|
||
|
||
> Queue Package for MiniProgram API
|
||
>
|
||
> 小程序底层操作队列化(`wx.request`, `wx.downloadFile`,`wx.uploadFile`)
|
||
>
|
||
> [miniprogram-network](https://npmjs.com/package/miniprogram-network)默认队列实现
|
||
|
||
Features:
|
||
|
||
* [x] 可自动注入/手动管理
|
||
* [x] [取消操作(`abort`)](#abort-取消操作)
|
||
* [x] [进度/header回调](#progress-进度支持)
|
||
* [x] [插队](#jump-插队)
|
||
* [x] 时间戳
|
||
* [x] timeout 自定义超时时间
|
||
* [ ] 动态收缩扩展
|
||
|
||
## Install(安装)
|
||
|
||
```
|
||
npm i miniprogram-queue
|
||
```
|
||
|
||
## Usage(使用)
|
||
|
||
```js
|
||
import {WxQueue} from 'miniprogram-queue';
|
||
//创建请求队列
|
||
const requestQueue = new WxQueue(wx.request,10);
|
||
// const uploadQueue = new WxQueue(wx.uploadFile,10);
|
||
// const downloadQueue = new WxQueue(wx.downloadFile,10);
|
||
|
||
// 发送请求
|
||
const task = requestQueue.push({
|
||
url:'https://github.com/NewFuture/miniprogram-network/'
|
||
});
|
||
|
||
// task.abort() 可取消操作
|
||
```
|
||
|
||
## API
|
||
|
||
### 参数
|
||
|
||
与官网API参数兼容 支持 扩展参数:
|
||
* `onProgressUpdate` 进度回调函数
|
||
* `onHeadersReceived` 响应头回调函数
|
||
* `jump` (默认`false`)是否插队
|
||
* `timestamp` (默认`false`) 是否记录时间戳,是则complete回调中会包含 一个`time`字段
|
||
```ts
|
||
{
|
||
send: number,
|
||
response: number
|
||
}
|
||
```
|
||
|
||
兼容API
|
||
* [request](https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html)
|
||
* [downloadFile](https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html)
|
||
* [uploadFile](https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html)
|
||
|
||
同时 `downloadFile` 和 `uploadFile` 支持通过[process 参数](#progress) 之间设置进度回调
|
||
|
||
### jump (插队)
|
||
|
||
```js
|
||
//第二个参数为true时优先级最高
|
||
requestQueue.push({
|
||
url:'https://github.com/',
|
||
jump:true,//插队
|
||
});
|
||
```
|
||
|
||
## Abort (取消操作)
|
||
|
||
所有操作返回一个`Task`对象，可取消操作
|
||
|
||
注意: 和官方API一致 **取消时依然会执行complete(如果配置了)**。
|
||
|
||
* 自动注入方式
|
||
```js
|
||
var task = wx.request(obj);
|
||
task.abort();
|
||
```
|
||
|
||
* 手动push
|
||
```js
|
||
var task = queue.push(obj);
|
||
task.abort();
|
||
```
|
||
|
||
## Progress (进度支持)
|
||
|
||
* `DownloadTask.onProgressUpdate(function callback)`
|
||
* `UploadTask.onProgressUpdate(function callback)`
|
||
|
||
> 小程序`onProgressUpdate`API的接口，设计上不太合理,
|
||
> 这个接口放在请求发生时更合适,而非在Task创建后。
|
||
|
||
此处保留了对onProgressUpdate的兼容适配,同时提供了可通过参数(`progress`)传入的方法
|
||
|
||
```js
|
||
|
||
const task =uploadQueue.push({
|
||
// 其他参数
|
||
onProgressUpdate:processCallback// callback function
|
||
onHeadersReceived:console.log
|
||
});
|
||
// function processCallback(progress,currentBytes,totalBytes){}
|
||
```
|
||
|
||
```js
|
||
// obj update object
|
||
const task = wx.uploadFile(obj);
|
||
// 保留原生调用方式支持
|
||
task.onProgressUpdate(processCallback); // callback function
|
||
// function processCallback(progress,currentBytes,totalBytes){}
|
||
```
|