一、javascript异步编程

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

永恒的宁静

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

阅读量505

点赞数

分类专栏： javascript异步编程文章标签： javascript javascript异步编程前端

本文链接：https://blog.csdn.net/weixin_42710036/article/details/127488797

版权

文章目录

一、异步概述
二、同步模式(Synchronous)
三、异步原理
四、Promise
五、 async await 语法糖
六、Generator

一、异步概述

异步在javascript世界中无处不在，ajax通信，nodejs中io读写等。
异步编程前提----单线程的javascript

console.log('foo')
for(let i=0;i<100000;i++){
   
    console.log('耗时操作')
}
console.log('等待耗时操作结束'）

PS：如上例，单线程都是从上往下执行的，耗时操作会阻塞进程的顺序执行，造成用户等待。

二、同步模式(Synchronous)

// 顺序执行, 入栈、出栈
console.log('global begin')


function bar(){
   
    console.log('bar task')
}

function foo(){
   
    console.log('foo task')
    bar()
}


foo()

console.log('global end')

三、异步原理

在这里插入图片描述
TIPS:

Call stack: 调用栈
Web APIS: 我们在执行代码的过程中，会去调用一些不属于javascript语言本身的内容，比如浏览器给我们提供的，运行环境给我们提供的API。这些东西调用我们就通过Web APIS去作展示。
Queue: 队列
Event loop：状态标识

异步执行流程

console.log(‘global begin’) 这一句入栈，打印一句global begin，出栈。
setTimeout(timer1)入栈，一看timer1需要1800ms后执行，将1800ms后执行加入到web apis 这个时候异步产生了，你等你的，我要继续执行，setTimeout(timer1)出栈。
setTimeout(timer2)入栈，一看timer2需要1000ms后执行，将1000ms后执行加入到web apis, setTimeout(timer2)出栈。
console.log(‘global end’)入栈，打印一句global end,出栈。
整个调用栈执行完毕，清空。
调用栈清空了，event loop就会去消息队列中检查看是否有需要执行的代码，时间一到web apis中的代码就会加到消息队列中，等待event loop调到调用栈中执行。

异步执行时是调用了异步线程，调用完成还是要回到javascript线程的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"