new Promise 理解

    function getData(){
        setTimeout(function(){
          var name = 'tom';
          return name;
        },1000)
    }
    console.log( getData() );  // undefined; 一開始以為能獲取到tom

使用回調方法獲取異步方法里面的數據

    function getData(callback){    
      setTimeout(function(){
          var name = 'tom';
          callback(name);
      },1000)
    }

    getData(function(val){
          console.log(val);    // tom
    });

使用promise方法獲取異步方法里面的數據

   var p = new Promise((resolve,reject)=>{
          setTimeout(function(){
              var count = 0;

              if(count){
                  resolve( count );
              }else{
                  reject( count );
              }
          },1000)
    });

    p.then(res=>{           //異步調用
        console.log(res);   
    },err=>{
        console.log(err)     
    })

    console.log(1);     //比then先執(zhí)行掐隐，也就證明then是異步調用

then鏈式調用

p.then(res=>{
    console.log(res);
    return new Promise((resolve,reject)=>{
              resolve('需再return promise對象，才能繼續(xù)then調用')
    })
})
.then(res=>{
     console.log(res) // 需要return p.....
})

then的err回調函數 & Promise的catch方法誰能捕捉到reject?

Promise.reject({code: 404})
.then(
  res => {}, 
  err => {
    // 當同時存在钞馁，會直接走then的err回調函數, catch不執(zhí)行
    console.log('then的', err);    // {code: 404}
  }
)
.catch(err=>{
    console.log('cathc的', err);   // 不會執(zhí)行
})

then方法和 async await 誰能接收到結果瑟枫？

async created() {
    try {
        let data = await this.init();
        // 如init函數已經用.then方法接收     data: undefined;
        // 如沒有.then接收，則此處會打印      data: {data: 9}
        console.log("data:", data);     
    } catch (err) {
        console.log("catch err:", err);
    }
},

init() {
    return Promise.resolve({ data: 9 })
    .then( res => {      // <- 若直接then或catch接收了pomise實例指攒， 上面的data為undefined;
         console.log("res:", res);
    });
},

Promise構造函數的靜態(tài)方法 -- 快速獲得 promise實例對象

  //傳入的參數非promise對象慷妙，則返回resolve/reject的promise對象
  let p1 = Promise.resolve({code:200, msg: 'success'});      
  let p4 = Promise.reject({code:404})；

  // 也可傳入的參數promise對象允悦，則結果根據resolve / reject
  let p2 = Promise.resolve( 
              new Promise((resolve,reject)=>{
                  reject('abc')
              }) 
  );

  p.then(res=>{
      if(res.code === 200){

          // 有時候業(yè)務不需要處理邏輯,就可以很方便直接返回promise對象膝擂。
          return Promise.resolve( res.data );
          // 不需要↓這樣復雜;
          // return new Promise((resolve,reject){resolve( res.data )}); 
      }
  }).then(data=>{
      console.log('成功啦!!')
      console.log(data);
  });

promise對象提供了then虑啤，catch, all, race方法

注意:
1.all方法的傳遞參數需要是數組;
2.all方法的所有promise是并發(fā)執(zhí)行(同時執(zhí)行);
3.任何一個promise返回reject，就會中斷去執(zhí)行catch

ES7提供的async & await處理異步函數
1.async使得函數變成異步,添加后依然同普通函數使用;
2.await操作符必須在async函數內使用;
3.await操作符等待的函數必須要返回的一個promise對象;
4.promise返回的是reject, await拿不到, 需要配合try catch來捕捉reject;

async function test(){
  try{

    var status = await Promise.resolve(200);
    console.log(status);      // 200

    var notFound = await Promise.reject(404);
     console.log(notFound);   // 沒有打印; ↓catch會捕捉到reject;

     console.log(55)          // 沒有打印; 當前面返回reject架馋，后續(xù)不再執(zhí)行;
  
  }catch(err){
    console.log(err);         // 404
  }
}

test();
console.log(1)    // 比test函數先執(zhí)行,也就證明test是異步函數;

最后編輯于：2023.01.20 15:19:32

?著作權歸作者所有,轉載或內容合作請聯系作者