微信小程序Request请求封装

用ES6Promise对象对wx.request进行封装
描述:wx.request是微信小程序提供的Api请求方法,success是请求成功的回调,fail是请求失败的回调,
咱们用es6的Promise对象对该方法进行封装。
好处:方便咱们对请求的异步处理,减小了咱们的业务代码。es6

1.封装底层代码编程

//wx.request请求数据
  requestData(method, url, data, header) {
    if (!url || !method) return;
    return new Promise((resolve, reject) => {
      wx.request({
        url: url,
        data: data || {},
        header: header || {},
        method: method.toLocaleUpperCase(),
        success: function (res) {
          resolve(res);
        },
        fail: function (res) {
          reject(res.errMsg || '发送网络错误(http fail)');
        }
      });
    });
  }

2.将咱们小程序全部api请求进行模块化编程,建立一个api.js,定义一个Api类进行2次封装小程序

class Api {
    constructor() {
      //此处写一些默认取值,例如拿storage里面的数据
    //例如wx.getStorageSync("...");
  }

  //调用示例
  getMyTestData(code) {
    let self = this;
    //定义api请求地址
    let url = '';
    let postData = {
        //向api发送的数据
    };
    //调用上面封装好的wx.request请求,返回了一个Promise对象
    return self.requestData('post', url, postData);
    }
}

//咱们将定义的Api类导入出去,而后咱们小程序内其它js能够引入该js调用了
module.exports = {
  Api: Api
}

3.具体业务js的调用方式
//导入咱们定义的Api类
import { Api } from '../../utils/api.js'; //具体路径根据本身项目结构来,填写相对路径
//定义一个变量获得Api类的实例,而后咱们就能够经过api这个对象去请求数据了
const api = new Api();微信小程序

//具体调用api

Test() {
    let self = this;
    //此处调用Api类里面定义的具体业务请求方法
    let xxxPromise = api.getMyTestData(//此处传入具体参数).then( res => {
        console.log("请求成功返回结果:", res);
        //执行你的业务逻辑代码
        //
        //
    }).catch( res => {
        console.error("请求失败返回结果:", res);
    });
    //此处我须要等待上述请求执行成功后才能作其余处理的话就这样写
    xxxPromise.then(() =>{
        //会等上面请求执行完再执行
        //
        //
    });
}
相关文章
相关标签/搜索