async / await 解决回调地狱

async / await 是ES7的新增语法,也是回调地狱的终极解决方案,我们可以用async / await语法把异步代码写的看起来像同步代码。

       本文主要是对async / await 的介绍及解决回调地狱的方法,关于Promise的详细介绍及Promise解决回调地狱,见:
      [ ES6之Promise的介绍及解决回调地狱 ]

async / await的介绍:

  1. async写在函数的前面,就可以该函数变成一个异步函数;
  2. await是写在异步函数里面的关键;
  3. await关键字后面必须是一个Promise对象;
  4. 有了以上三个条件,我们就可以把本该在promise的then回调里面接收的结果,放在await关键字前面定义一个变量来接受了;
async function goHome(){
let result = await new Promise(function(){...})
// 这里的代码会在上面的promise结束以后再执行
console.log(result); 
  1. async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值;

  2. await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。如果在 async function 函数体外使用 await ,我们将会得到一个语法错误;

  3. 正常情况下,await 命令后面是一个 Promise 对象,它也可以跟其他值,如字符串,布尔值,数值以及普通函数;

  4. 如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。如果等待的不是 Promise 对象,则返回该值本身。

function awaitDemo(){
   return new Promise((resolve) => {
       setTimeout(function(){
          console.log("awaitDemo");
          resolve();
       }, 1000);
   });
}
 
async function asyncDemo(){
   await awaitDemo();
   console.log("asyncDemo");
 }
asyncDemo();
// awaitDemo
// asyncDemo
发布了68 篇原创文章 · 获赞 264 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/weixin_42881768/article/details/104845791