Promise了解即Promise.all()的初步使用

一，什么是Promise：

它是异步编程的一种解决方案，他是一种承诺、约定，它约定

• 在 本轮 Javascript event loop（事件循环）运行完成 之前，回调函数是不会被调用的。
• 通过 then() 添加的回调函数总会被调用，即便它是在异步操作完成之后才被添加的函数。
• 通过多次调用 then()，可以添加多个回调函数，它们会按照插入顺序一个接一个独立执行。

这也就是promise的链式操作

 

二，Promise的优点：

1.解决异步操作回调地狱的问题，比如有多个请求，后一个的请求需要上一次请求的返回结果。过去常规做法只能 callback 层层嵌套，但嵌套层数过多的话就会有 callback hell 问题

2.更好的捕获错误，我们可在 catch 方法中处理 reject 回调

 

三，使用promise的好处：

这点其实也是属于promise解决回调的有点的，但是用promise我觉得需要单独提一下，那便是使我们的代码扁平且更具可读性了，可以让我们的代码逻辑更加清晰可见。

 

四，promise的执行顺序：

var promise1 = new Promise(function(resolve, reject) {
  console.log("1");
  setTimeout(function() {
    console.log("2");
    resolve("3");
  }, 300);
});

promise1.then(function(value) {
  console.log("4");
  console.log(value)
});
console.log("5");

> "1"
> "5"
> "2"
> "4"
> "3"

 

五，Promise.all()

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);
});
// expected output: Array [3, 42, "foo"]

 

此方法在集合多个 promise 的返回结果时很有用。

完成（Fulfillment）：
如果传入的可迭代对象为空，Promise.all 会同步地返回一个已完成（resolved）状态的promise。
如果所有传入的 promise 都变为完成状态，或者传入的可迭代对象内没有 promise，Promise.all 返回的 promise 异步地变为完成。
在任何情况下，Promise.all 返回的 promise 的完成状态的结果都是一个数组，它包含所有的传入迭代参数对象的值（也包括非 promise 值）。

失败/拒绝（Rejection）：
如果传入的 promise 中有一个失败（rejected），Promise.all 异步地将失败的那个结果给失败状态的回调函数，而不管其它 promise 是否完成。

 

六，promise实践

    new Promise((resolve, reject) => {
      activityService.personalInfoQuery({}, (err, res) => {
        if (res.status == 0) {
          resolve(res.data)
        } else {
          reject(err)
        }
      })
    }).then((data) => {
      activityService.simpleListData({
        rootUserId:self.data.userInfo.userId,
        businessId: data.businessId
      }, (err, res) => {
        if (res.status == 0) {
          self.setData({
            "customer.list": res.data.list
          })
        } else {
          console.log('获取客户数据失败')
        }
      });
    })

    let backData = new Promise(function(resolve, reject) {
      activityService.personalInfoQuery({}, (err, res) => {
        if (res.status == 0) {
          resolve(res.data)
        } else {
          reject(res.message);
        }
      })
    })
    backData.then(function(data) {
      activityService.myReward({
        "id": data.emplId
      }, (err, res) => {
        if (res.status == 0) {
          self.setData({
            rewardInfoList: res.data
          })
        } else {
          console.log(err)
        }
      })
    })

    Promise.all([
      new Promise((resolve, reject) => {
        if(!!self.data.cardId){ //名片人脉
          self.loadCardDataSource(resolve);
        }else{ 
          self.loadDataSource(resolve);
        }
      }),
      new Promise((resolve, reject) => {
        if (!self.chart) {
          self.ecComponent.init((canvas, width, height) => {
            let chart = echarts.init(canvas, null, { width: width, height: height });
            canvas.setChart(chart);
            self.chart = chart;
            resolve();
            return chart;
          });
        } else {
          resolve();
        }
      })
    ]).then(results => {
      let dataSource = results[0];
      // 节点总数小于阀值节点数量时一次性展示到chart中
      self.data.collapseEmptyNode = dataSource.length > 50;

      // 格式化数据源
      let renderData = self.buildData(dataSource);
      self.renderChart(renderData);
      self.setData({
        isLoaded: true,
        isDisposed: false
      });
    })

  getUserInfo: function () {
    return new Promise((resolve, reject) => {
      // 获取临时code
      wx.login({
        success: resolve,
        fail: reject
      })
    }).then((data) => {
      // 根据临时code获取token
      return new Promise((resolve, reject) => {
        wx.getUserInfo({
          lang: 'zh_CN',
          withCredentials: true,
          success: res => {
            data.info = {
              encryptedData: res.encryptedData,
              iv: res.iv,
              signature: res.signature
            }
            data.userInfo = res.userInfo;
            resolve(data);
          },
          fail: res => {
            reject(res);
          }
        })
      })
    }).then((data) => {
      // 根据临时code获取token
      return new Promise((resolve, reject) => {
        userSvr.login({
          code: data.code,
          encryptedData: data.info.encryptedData,
          iv: data.info.iv
        }, (err, result) => {
          if (err) return reject(err);
          if (result.status !== 0) return reject(result.message);
          app.globalData.userInfo = Object.assign({}, data.userInfo, result.data);
          resolve(app.globalData.userInfo);
        });
      });
    }).then((userInfo) => {
      return new Promise((resolve, reject) => {
        userSvr.personalInfoQuery({}, (err, res) => {
          if (res.status == 0) {
            app.globalData.userInfo = Object.assign({}, app.globalData.userInfo, res.data);
            app.globalData.commonInfo = {
              emplId: res.data.emplId,
              isManager: res.data.isManager,
              businessId: res.data.businessId,
              userId: res.data.userId
            }
            wx.setStorage({
              key: 'isManager',
              data: res.data.isManager,
            })
            return resolve(app.globalData.userInfo);
          }
        });
      });
    });
  },