更新记录

1.2.1(2019-12-31)

  1. 支持 npm & yarn
  2. 支持多组全局配置
  3. 支持单个请求局部配置
  4. 支持配置多组请求响应拦截器
  5. 支持对requestTask进行操作
  6. 支持多图上传
  7. 基于typescript开发可能友好的代码提示
  8. 内置loading拦截器

为了方便开发,自己使用了一段时间,没什么大问题。 有问题或建议及时联系我,谢谢!


Request

基于uni.request封装的请求对象

  1. 支持 npm & yarn
  2. 支持多组全局配置
  3. 支持单个请求局部配置
  4. 支持配置多组请求响应拦截器
  5. 支持对requestTask进行操作
  6. 支持多图上传
  7. 可能友好的代码提示

例子:

// src/utils/request.js

import { Request } from "@wuhz/uni-app-utils";

// 创建实例
const request = Request.getInstance();

// 设置去全局配置
request.setGlobalConfig([
  {
    baseUrl: "https://hzyun.top",
    header: {
      "content-type": "application/x-www-form-urlencoded"
    },
    data: {
      store_id: 1
    }
  },
  {
    baseUrl: "https://mt.starli.com.cn/?&r=api",
    header: {
      "content-type": "application/x-www-form-urlencoded"
    }
  }
]);

// 使用第二组配置
request.setDefaultConfigIndex(1);

// 添加拦截器
request.addInterceptor(
  [
    config => {
      // 返回 抛出异常
      return Promise.reject();
      // 不返回或其他任意返回值不处理

      // 返回 响应函数
      return (res) => {
        console.log(res);
        // 返回 抛出异常
        return Promise.reject();

        // 无返回值跳过

        // 其他返回值会进入下一个拦截器 直至最终输出 此处可对返回值进行修改
        // 注意先进后出原则
        return res.data
      }
    }
  ]
);

export default request;
// src/pages/index
request.get("/hzyun");

对象API

Request.getInstance()

获取Request实例,使用该方法创建实例,为了确保单例,请不要使用new Request()创建实例。

  • 用法:

    import { Request } from "@wuhz/uni-app-utils";
    
    const request = Request.getInstance();

实例API

setGlobalConfig( [ ...globalConfig ] )

设置全局配置

  • 参数:

    • { object } globalConfig 全局配置数组
    {
      // 开发者服务器接口地址
      baseUrl: string;
      // 请求参数
      data: string | object | ArrayBuffer;
      // 设置请求的 header,header 中不能设置 Referer。
      header?: any;
      // 如果设为json,会尝试对返回的数据做一次 JSON.parse
      dataType?: string;
      // 设置响应的数据类型。合法值:text、arraybuffer
      responseType?: string;
      // 超时时间,单位 ms 仅支付宝小程序
      timeout?: number;
       //验证 ssl 证书 仅5+App安卓端支持(HBuilderX 2.3.3+)
      sslVerify?: boolean;
    }
  • 用法:

    request.setGlobalConfig(
    [
      {
        baseUrl: "http://www.hzyun.top",
        data: {
          store_id: 1
        };
        header: {
          "content-type": "application/x-www-form-urlencoded"
        },
        dataType: "json",
        responseType: "text",
        timeout: 30000,
        sslVerify: true;
      },
      ...{}
    ]
    );

setDefaultConfigIndex( index )

设置全局默认使用的配置,默认使用第一组配置。

  • 参数:

    • { number } index 配置组索引值
  • 用法:

    request.setDefaultConfigIndex(1)

getRequestTask( name )

获取uni.request返回的requestTask

  • 参数:

    • { string } name 发送请求时传入的name值
  • 用法:

    request.getRequestTask("hzyun")

addInterceptor( [ ...interceptor ] )

添加拦截器

先进后出 类似koa

越先进入的请求,响应越后执行。最终执行函数也如此

内置loading拦截器

  • 参数:

    • { function } interceptor 拦截器函数
    /**
    * @param { object } config 请求配置
    * @param { function } addInterceptorFinal 添加最终执行函数
    * @return Promise.reject || false || function
    */
    function interceptor(config, addInterceptorFinal) {
    // 添加此拦截器最终一定会执行的函数
    // 此函数要执行成功才会生效,一定要放在return之前
    addInterceptorFinal(() => {
      console.log("final");
    });
    
    // 请求拦截
    console.log(config);
    
    // 返回 Promise.reject 抛出异常 阻止请求
    return Promise.reject("错误信息");
    
    // 返回 false 跳过此拦截器
    return false
    
    // 返回 function 接收到res参数 响应回来的数据
    return (res) {
      // 响应拦截
      console.log(res);
    
      // 返回 Promise.reject 抛出异常 阻止响应
      return Promise.reject("错误信息");
    
      // 返回 false 跳过此响应拦截器
      return false
    }
    }
  • 用法:

    request.addInterceptor([interceptor])

get( uri, data, localOptions )

发送get请求

  • 参数:

    • [必传] { string } uri 资源标志符
    • [可选] { string | object | ArrayBuffer } data 请求参数
    • [可选] { object } localOptions 局部选项

      {
      // 局部配置 会覆盖与全局配置重复的字段
      config?: {
        // 开发者服务器接口地址
        baseUrl: string;
        // 设置请求的 header,header 中不能设置 Referer。
        header?: any;
        // 如果设为json,会尝试对返回的数据做一次 JSON.parse
        dataType?: string;
        // 设置响应的数据类型。合法值:text、arraybuffer
        responseType?: string;
        // 超时时间,单位 ms 仅支付宝小程序
        timeout?: number;
        //验证 ssl 证书 仅5+App安卓端支持(HBuilderX 2.3.3+)
        sslVerify?: boolean;
      },
      // 使用的全局配置索引 默认为第一组
      globalConfigIndex?: number;
      // 为了获取requestTask添加的name标识
      name?: string;
      }
  • 用法:

    request.get("/hzyun",
    {
      money: 1000000000
    },
    {
      config: {
        {
          baseUrl: "http://www.hzyun.top",
          data: {
            store_id: 1
          };
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          dataType: "json",
          responseType: "text",
          timeout: 30000,
          sslVerify: true;
        },
      },
      globalConfigIndex: 1,
      name: "hzyun"
    }
    )

post( uri, data, localOptions )

同get

put( uri, data, localOptions )

同get

delete( uri, data, localOptions )

同get

trace( uri, data, localOptions )

同get

connect( uri, data, localOptions )

同get

options( uri, data, localOptions )

同get

uploadFiles( uri, options, localOptions )

图片上传,支持多图上传

  • 参数:

    • [必传] { string } uri 资源标志符
    • [可选] { object } options 图片上传选项
    • [可选] { object } localOptions 局部选项

      // localOptions 同get
      options = {
      // 必传 文件路径
      filePath: [],
      // 可选
      formData: {},
      // 默认为file
      name: "file",
      // 支付宝必传
      fileType: "image" | "video" | "audio"
      }
  • 用法:

    request.uploadFiles("/hzyun",
    {
      filePath: ["http://hanzhaorz.oss-cn-hangzhou.aliyuncs.com/code.jpeg"],
      name: "file"
    }
    )

问题及建议

  1. 觉得不错就给个star,谢谢啦!
  2. 有任何问题或者建议可以issue提交直接加我微信,第一时间解决!
wx

隐私、权限及商业化声明

说明:除收费原生SDK插件外,其他插件或示例工程默认均为MIT开源协议。如提供了github地址,并在github上专门标注了开源协议,则以github标注为准。

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问