Promise和async/await的总结

陨石坠灭

发布于 2020-01-21 15:44:39

4460

发布于 2020-01-21 15:44:39

文章被收录于专栏：全栈之路

第一次开始注意到ES6的语法，就是因为Promise，感觉比回调好用，后来又接触到async/await，使用后大大的减少了代码的层次结构，因此觉得有必要总结一下

Promise是ES6的语法，async/await是ES7的语法

Promise

Promise是异步编程的一种解决方案，它有三种状态，分别是：

pending：进行中
resolved：已完成
rejected：已失败

之前的方法回调：

function func1(cbk){
  ...
  cbk && cbk(参数1，参数2，参数3，...);
  ...
}

//方法调用
func1((参数1，参数2，参数3，...)=>{
  ...
})

改用Promise后：

function func1(){
  ...
  reurn new Promise((resolve,reject)=>{
      try{
          //如果成功
          resolve(参数);
      }catch(e){
        //如果失败
        reject(e);
      }
  });
}

//方法调用
//func1();

//func1().catch(()=>{});

//var p = func1();
//p.then(res=>{ ... });

func1().then((参数)=>{
  //调用成功
}).catch(err=>{
  //调用失败
  err && console.error(err);
});

改用Promise后，调用更加灵活了，回调可以处理，也可以不处理，同时可以处理异步调用的异常，更具有通用性

已网络接口调用为例（这里采用ajax）：

function ajaxPromise(  param ) {
  return new Promise((resovle, reject) => {
    $.ajax({
      "type":param.type || "get",
      "async":param.async || true,
      "url":param.url,
      "data":param.data || "",
      "success": res => { resovle(res); },
      "error": err => { reject(err); }
    })
  })
}

//调用
var p =ajaxPromise({
  url: "接口"
});
p.then(res=>{
  ...
});

Promise.all

function p1(){
  ...
  return new Promise((resolve, reject) => {
    resolve('success1');
  })
}

function p1(){
  ...
  return new Promise((resolve, reject) => {
    resolve('success2');
  })
}

function p3(){
  ...
  return new Promise((resolve, reject) => {
    reject('error');
  })
}

function func1(flag){
  var ps = [];
  ps.push(p1());
  ps.push(p2());
  flag && ps.push(p3());
  return new Promise.all(ps);
}

//方法调用
func1().then(res=>{
  console.log(res);
}).catch(err=>{
  consolo.error(err);// ['error']
});

func1(1).then(res=>{
  console.log(res);
}).catch(err=>{
  consolo.error(err);// ['success1','success2']
});

Promise.all: 只要有一个失败了，就会抛出异常
Promise.race: 返回执行最快的那个，无论异常或者失败

async/await

await必须使用在async修饰的方法内部

function func1(){
  ...
  reurn new Promise((resolve,reject)=>{
      try{
          //如果成功
          resolve(参数);
      }catch(e){
        //如果失败
        reject(e);
      }
  });
}

function async func2(){
  var res = await func1().catch(err=>{ err && console.error(err); });
  console.log(res);
  ...
}

使用async/await可以减少代码的嵌套，使代码更加清晰，代码中的func1使用await修饰后，可以直接拿到then方法中的结果，同时可以如果不使用Promise.catch方法，则会抛出异常，这时候可以配合’try/catch’使用：

function async func2(){
  try{
    var res = await func1();
    console.log(res);
    ...
  }catch(err){
     err && console.error(err); 
  }
}

对应的，func1也可以采用asyn实现：

function asyn func1(){
  ...
  if(成功){
    return 参数;
  }else{
    throw '我错了...';
 } 
}

//调用
func1().then(res=>{
  ...
}).catch(err=>{
  err && console.error(err);
});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/11/13，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript