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先执行，也就证明then是异步调用

then链式调用

p.then(res=>{
    console.log(res);
    return new Promise((resolve,reject)=>{
              resolve('需再return promise对象，才能继续then调用')
    })
})
.then(res=>{
     console.log(res) // 需要return p.....
})

then的err回调函数 & Promise的catch方法谁能捕捉到reject?

Promise.reject({code: 404})
.then(
  res => {}, 
  err => {
    // 当同时存在，会直接走then的err回调函数, catch不执行
    console.log('then的', err);    // {code: 404}
  }
)
.catch(err=>{
    console.log('cathc的', err);   // 不会执行
})

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构造函数的静态方法 -- 快速获得 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){

          // 有时候业务不需要处理逻辑,就可以很方便直接返回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是并发执行(同时执行);
3.任何一个promise返回reject，就会中断去执行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，后续不再执行;
  
  }catch(err){
    console.log(err);         // 404
  }
}

test();
console.log(1)    // 比test函数先执行,也就证明test是异步函数;

最后编辑于：2023.01.20 15:19:32