异步解决方案发展加深async await理解

最新推荐文章于 2024-11-07 09:14:33 发布

敖老板给你一刀

最新推荐文章于 2024-11-07 09:14:33 发布

阅读量216

点赞数

文章标签：前端 node.js http

本文链接：https://blog.csdn.net/weixin_51330486/article/details/121627793

版权

本文详细介绍了JavaScript中异步编程的概念，从回调函数到Promise，再到现代的async/await。讲解了await如何阻塞代码但不阻塞执行流程，并通过实例解析了异步任务的执行顺序。帮助开发者更好地理解和运用异步控制流。

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

异步

AJAX

可以实现与服务器的异步通信

局部刷新页面

异步解决方案的发展

1.回调函数

2.Promise

3.generator

4.async / await

Promise

new Promise是一个同步任务但是then方法是一个异步任务

async/await

async：定义一个异步函数，异步函数的返回值是一个promise对象

await 一般用于等待一个promise对象实际上就是等待一个异步处理结果他会阻塞后面的代码但实际不会看成异步如果有一个异步任务

和它阻塞的代码同时面临运行会先执行await 再去异步任务then方法

async function main() {
  const data = 'aaa';
  console.log(data);
  return data;
}
const qt = main();
console.log(qt);

这样的输出结果是aaa Promise{‘aaa}

async function main() {
  const data = await Promise.resolve('axy')
  console.log(data);
  return data;
}
const qt = main();
console.log(qt);

这样先输出结果Promise{} axy

await会阻塞await下面的代码执行

function foo() {
  console.log('1');
  return '2';
}
 async function bar() {
  console.log('3');
  await Promise.resolve('4')
}
async function main() {
  console.log('5');
    //会执行foo（） 但是不会去赋值给v1 要等同步任务完事才去赋值 
  const v1 = await foo();
  console.log(v1);
  const v2 = await bar();
  console.log(v2);
}
main()
console.log('6');
//输出是5 1 6 2 3 4

首先执行main函数输出5 完了const v1 那句话后面的await是等一个结果首先会调用foo（）函数但是不会去赋值给v1 因为await等到结果之后就会阻塞后面代码执行调用之后输出1 没赋值给v1

接着就会执行最后一句输出6 同步任务完事之后回去执行await后面的代码

把2赋值给v1 输出v1（输出2）

在执行下面的还是同理先调用输出3 没来得及赋值但是因为没有同步任务了所以继续赋值输出v2

还有一个吊炸天的题蜗牛学苑p374 第20分钟最后一道题就是下面这个

await会阻塞后面的代码但实际不会看成异步如果有一个异步任务

和它阻塞的代码同时面临运行会先执行await 再去异步任务then方法

要理解阻塞和异步是两个概念当执行到v2的时候会阻塞一波这个时候就去执行下面的异步代码then 异步任务完事再去执行下面的输出也就是被阻塞的

function foo() {
  console.log('1');
  return '2';
}
 async function bar() {
  console.log('3');
  return Promise.resolve('4')
}
async function main() {
  console.log('5');
  const v1 = await foo();
  console.log(v1);
  const v2 = await bar();
  console.log(v2);
}
main()
var promise  = new Promise((resolve) => { //promise是同步的
  console.log('7');
  resolve('8');
});
promise.then((val) => console.log(val));  //then是异步的
console.log('6');
//5 1 7 6 2 3 8 4