异步编程async/await

最新推荐文章于 2024-10-09 19:01:04 发布

eynoZzzzc

最新推荐文章于 2024-10-09 19:01:04 发布

阅读量2.3k

点赞数 2

分类专栏： HTML+CSS+JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_44185558/article/details/125336299

版权

HTML+CSS+JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细解析了async/await在JavaScript中的使用，包括异步函数的定义、返回值处理、await关键字的执行机制以及await与async配合实现的同步执行效果。通过实例分析，展示了如何控制异步函数的执行顺序和理解await的阻塞与非阻塞特性。

摘要由CSDN通过智能技术生成

async/await

使用 async 关键字可以让函数具有异步特征，但总体上其代码仍然是同步求值的。

async function foo() {
	console.log(1);
}

foo();
console.log(2);

异步函数如果使用 return 关键字返回了值（如果没有 return 则会返回 undefined），这个值会被 Promise.resolve()包装成一个Promise对象。

注：异步函数始终返回Promise对象！！

async function foo() {
	console.log(1);
	return 3;
}
// 给返回的Promise添加一个解决处理程序
foo().then(console.log);
console.log(2);
// 1
// 2
// 3

//等同于
async function foo() {
	console.log(1);
	return Promise.resolve(3);
}
// 给返回的Promise添加一个解决处理程序
foo().then(console.log);
console.log(2);
// 1
// 2
// 3

await

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

await关键字会暂停执行异步函数之后的代码，使其让出 JavaScript 运行时的执行线程，先执行异步。

async 单独使用的时候，放在函数前面表示这个函数是一个异步函数，如果 async 函数有返回结果，必须要用.then()方法来承接（也就是返回的值会被自动处理成 promise 对象）

async function helloAsync(){
    return "helloAsync";
  }
  
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
 
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})

async await 搭配使用的时候，await 是等待此函数执行后，再执行下一个，可以把异步函数变成同步来执行，控制函数的执行顺序。

当 await 后跟的函数是返回的 promise

let foo = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('lee');
      resolve();
    }, 1000);
  });
};

async function bar() {
  await foo();		
  console.log('van');
}
console.log(bar()); // 隔1秒同时输出 lee van

当 await 后跟的是普通函数（非 promise()）

let f1 = () => {
  setTimeout(() => {
    console.log('lee');
  }, 1000);
};

let f2 = () => {
  setTimeout(() => {
    console.log('van');
  }, 1000);
};

async function bar() {
  await f1();
  await f2();
  console.log('yeah');
}

console.log(bar()); // yeah 隔1秒同时输出 lee fan

如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。
如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西；

await 一定要搭配 async 使用，如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

注意：

await 关键字必须在异步函数中使用，不能在顶级上下文如<script>标签或模块中使用
await 关键字也只能直接出现在异步函数的定义中，在同步函数内部使用 await 会抛出 SyntaxError
await 不允许出现在箭头函数中
异步函数如果不包含 await 关键字，其执行基本上跟普通函数没有什么区别
JavaScript 运行时在碰到 await 关键字时，会记录在哪里暂停执行。等到 await 右边的值可用了，JavaScript 运行时会向消息队列中推送一个任务，这个任务会恢复异步函数的执行

实例分析await执行顺序：

async function foo() {
	console.log(2);
	console.log(await Promise.resolve(8));
	console.log(9);
}
async function bar() {
 	console.log(4);
	console.log(await 6);
	console.log(7);
}
console.log(1);
foo();
console.log(3);
bar();
console.log(5);  

// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9