技術標籤：ES6javascriptes6vue.js

一直都知道ES6 Promise可以解決無限套娃的問題，這不終於碰到了

需求：一個介面需執行兩次分別拿到結果再次提交另外一個介面（小聲bb：不知道為何設計的這麼複雜）

// 新增子方案
    handleaAddSon(rows, title) {
      return new Promise((resolve, reject) => {
        this.$api.addSonInsert(rows).then((res) => {
          if (res.code == 200) {
            if
 
 (title == "推薦方案") {
              this.recommendId = res.rows[0].eventId;
            } else {
              this.comparisonId = res.rows[0].eventId;
            }
            resolve(true);
          } else {
          	//返回錯誤資訊
            reject(res.msg);
          }
        });
      });
    }
 
,
   	submitForm() {
	   let p1 = this.handleaAddSon(this.recommend, this.valueRecommend);
       let p2 = this.handleaAddSon(this.compare, this.valueCompare);
       Promise.all([p1, p2])
         .then((val) => {
         	//成功的回撥 
         	//成功的資訊在上面已經處理所以這裡只需接成功之後的操作
           this.handleEditUpdate
 
();
         })
         .catch((error) => {
          	//對錯誤資訊進行處理
           this.$message({
             message: error,
             type: "error",
           });
         });
	}

探索

   handleAdd(time){
       return new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve("time:"+time)
           },time)
       })
   },
   async handlePromise(){
       console.log('======start======')
       let p1 = await this.handleAdd(4000);
       console.log(`======${p1}======`)
       let p2 = await this.handleAdd(2000);
       console.log(`======${p2}======`)
       console.log('======end======')
   }

列印結果

結尾：兩種方式都能滿足同步業務需求只是寫法不同而已，條條大路通羅馬