用Promise對象將異步操作以同步操作的流程表達出來

遇到一個需求，是訂單詳情頁面的商品信息下拉選擇的商品不能重複選中；那麼在訂單頁面進去就會有當前訂單的商品信息了，當用戶想要再添加一個商品信息時，發現上面已經有的商品還可以選中；

這就是異步處理了這個禁用問題；
下面是禁用的方法：

發現this.listSkuInfo斷點是空的
再看獲取下拉選擇器中商品的值：

如果下拉選擇器中有商品的就push到listSkuInfo這個數組中。
當我打印發現：

先是打印禁用的listSkuInfo這個數組，再打印下拉選擇器的listSkuInfo數組，但是打印裏面有值的，進斷點卻是空數組；原來是因爲引用了，所以打印有值；
需要把禁用的，在下拉選擇器後面執行；
於是用了異步操作以同步操作的流程。
首先使用Promise構造函數，用來生成一個‘獲得商品信息下拉列表’的方法，獲取下拉選擇器的值，再用resolved，在異步操作成功時調用，並將異步操作的結果，作爲參數傳遞出去；
‘獲得商品信息下拉列表’的方法生成以後，可以用then方法分別指定resolved狀態和rejected狀態的回調函數：

上面兩個截圖就是：用Promise對象將異步操作以同步操作的流程表達出來。
先執行‘獲取商品信息’再執行‘禁用存在的商品’，就不會出現編輯頁面進去已存在的商品可以重複選中的問題了。

這是es6的Promise對象：

ES6 規定，Promise對象是一個構造函數，用來生成Promise實例。

下面代碼是創造了一個Promise實例。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise構造函數接受一個函數作爲參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由 JavaScript 引擎提供，不用自己部署。

resolve函數的作用是，將Promise對象的狀態從“未完成”變爲“成功”（即從 pending 變爲 resolved），在異步操作成功時調用，並將異步操作的結果，作爲參數傳遞出去；reject函數的作用是，將Promise對象的狀態從“未完成”變爲“失敗”（即從 pending 變爲 rejected），在異步操作失敗時調用，並將異步操作報出的錯誤，作爲參數傳遞出去。

Promise實例生成以後，可以用then方法分別指定resolved狀態和rejected狀態的回調函數。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受兩個回調函數作爲參數。第一個回調函數是Promise對象的狀態變爲resolved時調用，第二個回調函數是Promise對象的狀態變爲rejected時調用。其中，第二個函數是可選的，不一定要提供。這兩個函數都接受Promise對象傳出的值作爲參數。
Promise 新建後就會立即執行：

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

上面代碼中，Promise 新建後立即執行，所以首先輸出的是Promise。然後，then方法指定的回調函數，將在當前腳本所有同步任務執行完纔會執行，所以resolved最後輸出。