Miss any of our Open RFC calls?Watch the recordings here! »

miniprogram-request

0.2.0-alpha.0 • Public • Published

miniprogram-request npm version

A better Request package for MiniProgram [developing]

小程序请求库封装 axios Like

Features

  • Promise
  • Cancelable
  • Queue
  • Wx request option
    • responseType
    • headers
    • dataType (merged into responseType)
    • timeout (not supported for each request)
  • Configuration
    • baseUri
    • replace parameters
    • Retry when network failure
    • authentication?
  • Interceptors in Lifecycle (only one,modify data or status)
    • transform request data
    • transform response data
  • Global Listeners
    • On Send (before request data send & after request data transformed)
    • On Response (after request response data transformed)
    • On resolved? (before then of Promise)
    • On rejected (before catch of Promise)
    • On abort
    • On complete
  • On Progress?
  • pause/resume (promise/async instead)

API

methods:

  • request<T>(options: RequestOptions): Promise<T>;
  • request<T>(method: string, action: string, data?: any, config?: ExtraConfig): Promise<T>;
  • get<T>(action: string, data?: any, config?: ExtraConfig): Promise<T>;
  • post<T>(action: string, data?: any, config?: ExtraConfig): Promise<T>;
  • put<T>(action: string, data?: any, config?: ExtraConfig): Promise<T>;
  • delete<T>(action: string, data?: any, config?: ExtraConfig): Promise<T>;
  • patch<T>(action: string, data?: any, config?: ExtraConfig): Promise<T>;
  • head<T>(action: string, data?: any, config?: ExtraConfig): Promise<T>;

properties:

  • Request.Defaults 全局配置
  • Reqeust.Listeners 全局事件监听列表
    • onSend(options: RequestOptions) => any;
    • onResponse(res: wx.RequestSuccessCallbackResult, options: RequestOptions) => any;
    • onComplete(res: wx.GeneralCallbackResult, options: RequestOptions) => any;
    • onReject(res: any | wx.GeneralCallbackResult, options: RequestOptions) => any;
    • onAbort(reason: any, options: RequestOptions) => any;

static

  • Http.RequestTransformation 默认请求转换函数
  • Http.ResponseTransformation 默认响应转换函数

Usage

quick start

import {Request} from 'miniprogram-request';
 
// 设置全局配置,设置一次全部生效
// 设置请求根地址,可选
Request.Defaults.baseURL = "https://minipgrogram.newfuture.cc/"
// 添加监听时间 可选
Request.Listeners.onResponse.push(console.log); // 记录每次响应
 
Request.get('items')
        .then(applyFunction) // 返回数据
        .catch(err=>wx.showToast({title:'数据拉取失败'}));

URL build

Request.post('/items',{name:'future'})
// POST /items
// {name:"future"}
 
Request.get('/items/{id}',{show_detail:false},{params:{id:12345}})
// GET /items/12345?show_detail=false
 
Request.put('/items/{id}',{name:'new'},{params:{id:12345}})
// PUT /items/12345
// {name:"new"}
// --- json 序列化body
 
 
//由于小程序不支持Patch,此处使用X-HTTP-Method-Override实现Patch
//此功能需要服务器端支持
Request.patch('/items/{id}',{name:'new'},{params:{id:12345}})
// POST /items/12345
// X-HTTP-Method-Override: PATCH
// {name:"new"}
 
 

TypeScript

泛型支持

//TS 类型推断
import { Request } from 'miniprogram-request';
 
interface Item {
    id: number,
    name: string
}
 
// 泛型 then的参数值类型为 Item[]
Request.get<Item[]>('/items')
    .then(list => list.forEach(i => console.log(i.id + i.name)))

CancelToken (abort)

可通过cancel token 方式取消请求

import { Request, CancelToken } from 'miniprogram-request';
 
// 创建一个 tokensource
const source = CancelToken.source();
 
Request.get('items', { skip: 100 }, { 
    // 配置 cancelToken
    cancelToken: source.token 
});
 
// 需要取消操作时
source.cancel('cancel the reqeust');

configuration

修改全局配置

Request.Defaults.retry = 2;//设置网络错误时重试次数

全部可配置内容

{
 
    /**
    * 请求的相对地址
    */
    url: string;
 
    /**
    * 请求方法
    * HTTP request mthod: GET POST ...
    */
    method?:'OPTIONS'|'GET'|'HEAD'|'POST'|'PUT'|'DELETE'|'TRACE'|'CONNECT';
 
    /**
     * 请求数据
     * reqeust data
     *  * **data 数据说明:**
     *
     * 最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下:
     *
     * *   对于 `GET` 方法的数据,会将数据转换成 query string(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)
     * *   对于 `POST` 方法且 `header['content-type']` 为 `application/json` 的数据,会对数据进行 JSON 序列化
     * *   对于 `POST` 方法且 `header['content-type']` 为 `application/x-www-form-urlencoded` 的数据,会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)
     */
    data?: any;
    /**
    * 请求的根目录
    * Base URL for request
    */
    baseURL?: string;
 
    /**
    * 自定义头 
    * user defined headers
    */
    headers?: KeyRawValuePair;
 
    /**
     * URL Path
     * the path parameters to be replace in path
     * Must be a plain object
     * @example 
     *  url = "/{ID}/status"
     *  param = {ID: 12345}
     * request url will be /1234/status
     */
    params?: KeyRawValuePair,
 
    /**
    * 重试次数 默认重试1次
    * retry times when fail
    */
    retry?: number; 
 
    /**
     * response data type
     */
    responseType?: "json" | "text" | "arraybuffer";
 
    /**
     * 修改数据或者头;返回 wx.request参数
     * 异步返回promise
     * You may modify the data or headers object before it is sent.
     */
    transformRequest?: TransformRequest;
 
    /**
     * 返回数据修改,返回值作为then的输入, throw exception 抛给catch
     * 异步返回Promise
     * allows changes to the response data to be made before it is passed to then/catch
     *  @example `res=>res.data`
     */
    transformResponse?: TransformResponse;
 
}

单次请求特殊配置

/每次请求全部可配置参数
//已设置的参数会覆盖默认参数
//仅对此次请求生效
Request.request({
    url: 'items',
    method: 'POST',
    data: {},
    cancelToken: null,
    baseURL: 'https://qq.com/',
    headers: {},
    params: null,
    retry: 3,
    responseType: "json",
    transformRequest: Http.RequestTransformation,
    transformResponse: Http.ResponseTransformation
})
 
// 快速请求配置参数
Request.post('items', {}, {
    //除了method,url和 data 不能设置其他均可设置
    cancelToken: null,
    baseURL: 'https://qq.com/',
    headers: {},
    params: null,
    retry: 3,
    responseType: "json",
    transformRequest: Http.RequestTransformation,
    transformResponse: Http.ResponseTransformation
})

创建一个新的Http管理对象

// 重新创建一个Http
const http = new Http({
    //除了method,url,data 和cancelToken不能设置其他均可设置
    baseURL: 'https://qq.com/',
    headers: {},
    params: null,
    retry: 3,
    responseType: "json",
    transformRequest: Http.RequestTransformation,
    transformResponse: Http.ResponseTransformation
})

LifeCircle

Request Life Circle

references

Install

npm i [email protected]

Version

0.2.0-alpha.0

License

Apache-2.0

Unpacked Size

47.7 kB

Total Files

21

Last publish

Collaborators

  • avatar