async/ await结合Promise使用,如何接住Promise抛出的错误

2019-05-24206次阅读javascriptvue

await语法

[return_value] = await expression;

表达式(expression)

一个Promise对象或者任何要等待的值。

返回值(return_value)

返回Promise对象的处理结果。如果等待的不是Promise对象,则返回该值本身。

  • await只能在异步函数async function中使用。

  • await表达式会暂停当前async function的执行,等待Promise处理完成。若Promise正常处理(fulfilled),其回调的resolve函数参数作为await表达式的值,继续执行async function。

  • 若Promise处理异常(rejected),await表达式会把Promise的异常原因抛出。

  • await如果返回的是reject状态的promise,如果不被捕获抛出,就会中断async函数的执行

  • 另外,如果await操作符后的表达式的值不是一个Promise,则返回该值本身。

  • 在async/await函数中,通常使用try/catch块来捕获错误。

function sendAuth( data ){
    return new Promise( (resolve,reject) =>{
        $.post(`${ajaxUrl}auth/sendphonemsg`,data,json=>{
          const {code,msg,data} = JSON.parse(json);
          if(code == 2001){
             return reject(msg);
          }
          resolve( data );
        });
    });
}

async function beforeCreate(){
    try {
       const data = await  sendAuth(27);
    } catch(e) {
       return console.log(e);
    }
}

beforeCreate();//若Promise正常处理(fulfilled)打印data,如异常(rejected)打印e

如果每写一个await都要用try/catch来捕获Promise异常(rejected),那么整屏到处都是try/catch语句。有没有更简洁的解决方案呢?有,细节看这里如何在没有try-catch块的情况下编写async await

// to.js
export default function to(promise) {
   return promise.then(data => {
         return [null, data];
   })
   .catch(err => [err]);
}

如何使用:

function sendAuth( data ){
    return new Promise( (resolve,reject) =>{
        $.post(`${ajaxUrl}auth/sendphonemsg`,data,json=>{
           const {code,msg,data} = JSON.parse(json);
           if(code == 2001){
              return reject(msg);
           }
           resolve( data );
        });   
    });
}

async function beforeCreate(){
    const [err,user] = await  to( sendAuth(27) );
    if(err) return console.log(err);
    //if(!user) return console.log(err);
}
上一篇: 如何在没有try-catch块的情况下编写async await  下一篇: vue中ES6的Promise  

async/ await结合Promise使用,如何接住Promise抛出的错误相关文章