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);
          }
        });
      });
    });
  },