美文网首页
基于promise.all实现wx.request微信小程序同步

基于promise.all实现wx.request微信小程序同步

作者: 喵呜Yuri | 来源:发表于2019-05-28 14:03 被阅读0次

    微信小程序的wx.request方法是异步的,并且没有像ajax一样有个async的设置参数去设置同步执行。
    但是我这儿有个类似这样的需求:

    var postDataArr = ['aaa','bbb','ccc'];
    var getEndData = [];
    for(var i = 0;i<postDataArr .length;i++){
    return new Promise(function (resolve, reject) {
      wx.request(
        ......
        success:function(res){
          getEndData.push(res);
        }
      )
    })
    }
    
    return getEndData;//得到处理数据
    

    wx.request作为异步请求方法,显然我们拿到的getEndData依然是个空。

    我的解决方式是用promise.all
    promise的概念
    promise的作用简而言之就是Promise的它的多重链式调用,可以避免层层嵌套回调。假设我们在第一次ajax请求后,还要用它返回的结果再次请求呢?promise就非常有用了。

    function sendRequest(url, param) {
        return new Promise(function (resolve, reject) {
            request(url, param, resolve, reject);
        });
    }
    
    sendRequest('test1.html', '').then(function(data1) {
        console.log('第一次请求成功, 这是返回的数据:', data1);
        return sendRequest('test2.html', data1);
    }).then(function(data2) {
        console.log('第二次请求成功, 这是返回的数据:', data2);
        return sendRequest('test3.html', data2);
    }).then(function(data3) {
        console.log('第三次请求成功, 这是返回的数据:', data3);
    }).catch(function(error) {
        //用catch捕捉前面的错误
        console.log('sorry, 请求失败了, 这是失败信息:', error);
    });
    

    那我所请求的循环和这个有所不同,我不知道要then多少次。
    promise.all是怎么实现的呢?
    Promise.all(iterable)方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise 时回调完成(resolve);如果参数中 promise 有一个失败(rejected),此实例回调失败(reject),失败原因的是第一个失败 promise 的结果。

    var promise1 = Promise.resolve(3);
    var promise2 = 42;
    var promise3 = new Promise(function(resolve, reject) {
      setTimeout(resolve, 100, 'foo');
    });
    
    Promise.all([promise1, promise2, promise3]).then(function(values) {
      console.log(values);
    });
    

    以下是我在实际项目引用中的代码:

    var PromiseAllArr  = [];//*********************用来存多个Promise
     for (var k = 0; k < detail_postData.initData.length; k++) {
          var v = detail_postData.initData[k];
          var data_ = {
            tran_no: v.tran_no,
            info_id: v.infoid
        };
          PromiseAllArr.push(
            new Promise(function (resolve, reject) {
              wx.request({
                url: common.BASE_URL + 'XXXXX',
                data: data_,
                method: 'post',
                dataType: 'json',
                header: {
                  'access_token': AUTH_TOKEN,
                  'user_key': USER_KEY
                },
                success: function (getinfo) {
                   //如果返回数据是正确的
                  if (getinfo.data.code == '1') {
                    return resolve(getinfo);
                  } else {
                  //如果返回数据是错误的
                    return reject(getinfo.data.msg);
                  }
                },
                fail: function (error) {
                  return error;
                },
                complete: function (complete) {
    
                  return complete;
                }
              })
          })
    
          )
      //*********************Promise存好了,现在来用
     Promise.all(PromiseAllArr).then(function (values) {
          console.log(values);
        }).catch(reason => {
          console.log(reason)
        });
    

    当PromiseAllArr中的Promise请求错误,就会返回第一个报错的Promise请求中的reject,返回到catch函数里.
    当PromiseAllArr中的Promise全部请求成功,则会返回到then函数中,返回的是由各Promise请求成功返回的数组。

    网上建议使用async-wait解决,
    它的解决方法
    它的解决原理
    但是我用这个比较容易报错,还需要装换es6到es5

    相关文章

      网友评论

          本文标题:基于promise.all实现wx.request微信小程序同步

          本文链接:https://www.haomeiwen.com/subject/lgirtctx.html