js async await 终极异步解决方案

发布日期:2019-10-27

既然有了promise 为什么还要有async await ? 当然是promise 也不是完美的异步解决方案,而 async await 的写法看起来更加简单且容易理解。

回顾 Promise

Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。

Promise 对象是由关键字 new 及其构造函数来创建的。构造函数会,把一个叫做“处理器函数”(executor function)的函数作为它的参数。这个“处理器函数”接受两个函数resolve 和 reject 作为其参数。当异步任务顺利完成且返回结果值时,会调用 resolve 函数,而当异步任务失败且返回失败原因(通常是一个错误对象)时,会调用reject 函数。

promise 状态

    pending:初始状态,既不是成功,也不是失败状态    fulfilled:操作成功    rejected:操作失败

promise demo

1 var promise1 = new Promise(function(resolve, reject) { 2 setTimeout(function() { 3 resolve("foo"); 4 }, 300); 5 }); 6 promise1.then(function(value) { 7 console.log(value); 8 // foo 9 });10 console.log(promise1);11 // [object Promise]

通过外部then() 方法来绑定成功、失败的回调函数,有没有感觉这个跟之前的ajax 差不多,只不过是我们把回调丢到了then() 中,这个then 并且支持链式操作,即如果存在多个嵌套那么也就是不断的then()。

async await 字面理解

  先从字面意思来理解,async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步任务执行完成的的结果。

并且 await 只能出现在 async 函数中。

async await demo

1 在api中,把结果return 出去2 export async function getRetailUnitPrice () {3 const reqBody = await get("/race/spot/racespot/enter/dayahead")4 return reqBody5 }

1 vuex 中把结果commit:2 // 发电:日前机组中标出力3 async getRealTimeRetailUnitPrice ({commit}) {4 const {output} = await getRetailUnitPrice()5 commit(types.PLANT_REALTIME_DAYAHEAD, {output})6 }

1 在vue中代码2 try {this.$store.dispatch("getRealTimeRetailUnitPrice")3 } catch (e) {4 this.$Message.error(e)5 }

async、await 如何执行

  async告诉程序这是一个异步操作

  await 是一个操作符,即await 后面是一个表达式,程序的执行流会暂停,且一直在等待这个表达式的结果

async 的返回值

1 // async2 async function testAsync() {3 return "hello async";4 }5 const data = testAsync();6 console.log(data);

如图所示:

当调用一个 async 函数时,会返回一个 Promise 对象。根据mdn的解释

  当这个 async 函数返回一个值时,Promise 的 resolve 方法会负责传递这个值;

  当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值。async 函数中可能会有 await 表达式,await表达式会使 async 函数暂停执行,直到表达式中的 Promise 解析完成后继续         执行 async中await 后面的代码并返回解决结果。

注意, await 关键字仅仅在 async function中有效

既然返回的是Promise 对象,所以在最外层不能用 await 获取其返回值的情况下,那么肯定可以用原来的方式:then() 链来处理这个 Promise 对象 如

1 // async2 async function testAsync() {3 return "hello async";4 }5 let data = testAsync().then( (data) => {6 console.log(data) // hello async 7 return data8 });9 console.log(data);

如果 async 函数没有返回值,又怎么样呢?很容易想到,它会返回 Promise.resolve(undefined)。

联想一下 Promise 的特点无等待,所以在没有 await 的情况下执行 async 函数,它会立即执行,返回一个 Promise 对象,并且,绝不会阻塞后面的语句。

await 操作符意义

按照mdn解释 await会暂停当前async 函数执行,并且await 后面是一个表达式,即这个await 等待的是一个表达式(这个表达式返回promise 对象或者一个具体的值):

  这个表达式如果返回的是一个Promise 对象,那么其回调的 resolve函数参数作为 await 表达式的值,如果这个Promise rejected 了,await 表达式会把 Promise 的异常抛出。

  这个表达式如果返回的是一个常量,那么会把这个常量转为Promise.resolve(xx),同理如果没有返回值也是underfind

1 async function testAwait() {2 const data = await "hello await";3 console.log(data) 4 return data5 }

输出 “hello await

返回promose 对象,成功状态

1 function say() { 2 return new Promise(function(resolve, reject) { 3 setTimeout(function() { 4 let age = 26 5 resolve(`hello, joel。今年我 ${age} 岁`); 6 }, 1000); 7 }); 8 } 9 10 async function demo() {11 const v = await say(); // 输出:hello, joel。今年我 26 岁 等待这个say 的异步,如果成功把回调 resole 函数的参数作为结果12 console.log(v);13 }14 demo();

返回promise 对象,失败状态

1 function say() { 2 return new Promise(function(resolve, reject) { 3 setTimeout(function() { 4 let age = 26 5 reject(`hello, joel,发生了异常。今年我 ${age} 岁`); 6 }, 1000); 7 }); 8 } 9 async function demo() {10 try {11 const v = await say(); // 输出:hello, joel,发生了异常。今年我 26 岁 等待这个say 的异步,如果成功把回调 resole 函数的参数作为结果12 console.log(v);13 } catch (e) {14 console.log(e)15 }16 }17 demo();

 async/await 相比原来的Promise的优势在于处理 then 链,如下使用async   awiat 嵌套情况如下

1 function sing() { 2 return new Promise(function(resolve, reject) { 3 setTimeout(function() { 4 resolve(`来一首好听的歌吧~~~`); 5 }, 1000); 6 }); 7 } 8 async function demo() { 9 try {10 const v = await say(); 11 const s = await sing(); 12 console.log(v); // 输出:hello, joel。今年我 26 岁13 console.log(s) // 来一首好听的歌吧~~~14 } catch (e) {15 console.log(e)16 }17 }18 demo();

如果使用原来的Promise 就是把回调放在then()中

 

总结

    async 告诉程序这是一个异步,awiat 会暂停执行async中的代码async 函数会返回一个Promise 对象,那么当 async 函数返回一个值时,Promise 的 resolve 方法会负责传递这个值;当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值await  操作符用于等待一个Promise 对象,并且返回 Promise 对象的处理结果(成功把resolve 函数参数作为await 表达式的值),如果等待的不是 Promise 对象,则返回该值本身 Promise.resolve(xx) 
, 1, 0, 9);