js if else return不管用_前端知识013 学会异步，JS不再烧脑

01 同步和异步

0101 认识同步异步

0102 前端经常遇到的异步操作（三个经典例子）

0103 拿到异步的结果 ---轮询和回调

0104 回调的几种方式

02 Promise

0201 Promise基本用法

0202 Promise 基本API

0203 自己写一个Promise的套路

0204 await/ async

0205 手写Promise

面试的时候经常问到JS异步的理解，那究竟什么是异步代码呢？

当我最开始看到异步的时候，我的脑海里浮现的是操作系统当中进程同步和进程异步的内容。我把这部分带入到JS当中，就很容易理解到到底什么是异步。

01 同步和异步

0101 认识同步异步

在我们传统的 “命令式” 编程语言中，我们的思考逻辑往往是像序列一样的一个事情做完了，然后再做下一个事情。翻译成人话就是，我们平常写代码的逻辑就是一行执行完了再执行下一行，一个程序就是由一组命令序列组成。

这样的代码很容易理解，但是，JavaScript 在设计阶段为了保证线程安全并且保证引擎不会被 IO 等待所阻塞导致页面失去响应，于是就向其他 GUI 程序学习了“异步事件模型”，所以“异步事件模型” 是一种解决多线程并行问题的模型。翻译过来就是如果按照同步的方式工作，JS引擎会有大量的无效运算时间。这个空闲等待时间是对资源的大幅度浪费，我们时候不能容忍的。所以我们引入异步机制，使得JS引擎的空闲时间多了很多，JS引擎空闲的这段时间，是浏览器在进行计时工作。

首先我们来看什么是同步：

console.log(1)
console.log(2)
console.log(3)

浏览器顺序打印出来1—>2—>3 这就是。这是按照代码顺序执行的

console.log(1)
setTimeout(()=>{
    
 console.log(2)
},1000)
console.log(3)

浏览器顺序打印出来1—>3—>2，这个时候 setTimeout(()=>{ console.log(2)},1000) 这部分代码就是异步执行了。

所以总结来说同步就是等任务执行完，得到结果，才执行下一个任务。异步等任务执行完，直接执行下一个任务

0102 前端经常遇到的异步操作

例子01

document.getElementsByTagNameNS('img')[0].width //0
console.log('done')

此时得到的宽度是0，因为图片是异步加载的

我们修改代码使用异步方式

document.getElementsByTagNameNS('img')[0].onload = function(){
    
    console.log(this.width) //不是0
    console.log('real done')
}
console.log('done')

例子02

let liList = document.querySelector