目录
- 1_异步函数
- 1.1_async
- 1.2_异步函数的执行流程
- 2_await关键字
- 2_浏览器进程、线程
- 2.1_进程和线程
- 2.2_操作系统的工作方式
- 2.3_浏览器中的JavaScript线程
- 2.4_浏览器的事件循环
- 2.3_宏任务和微任务
- 2.4_Promise面试题
- 题一
- 题二
1_异步函数
1.1_async
async是asynchronous单词的缩写，异步、非同步；
sync是synchronous单词的缩写，同步、同时；
async关键字用于声明一个异步函数， async异步函数可以有很多中写法
// 异步函数
// 写法一
async function foo() {
console.log("foo function1")
}
// 写法二
const bar = async function() {}
// 写法三
const baz = async () => {}
// 写法四
class Person {
async running() {}
}
1.2_异步函数的执行流程
异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。
// 返回值的区别
// 1.普通函数
function foo1() {
return 123
}
console.log(foo1()) //123
异步函数有返回值时，和普通函数会有区别：
- 情况一：异步函数的返回值相当于被包裹到Promise.resolve中；
- 情况二：异步函数的返回值是Promise，状态由由Promise决定；
- 情况三：异步函数的返回值是一个对象并实现了thenable，那么由对象的then方法来决定；
// 2.异步函数
async function foo2() {
// 1.返回一个普通的值。被包裹到Promise.resolve
// -> Promise.resolve(321)
return ["abc", "cba", "nba"] //res: (3) ['abc', 'cba', 'nba']
// 2.返回一个Promise。状态由由Promise决定
// return new Promise((resolve, reject) => {
// setTimeout(() => {
// resolve("aaa") //res: aaa
// }, 3000)
// })
// 3.返回一个thenable对象。由对象的then方法来决定
// return {
// then: function(resolve, reject) {
// resolve("bbb") //res: bbb
// }
// }
}
foo2().then(res => {
console.log("res:", res) //res: (3) ['abc', 'cba', 'nba']
})
如果在async中抛出了异常，程序不会像普通函数一样报错，而是会作为Promise的reject来传递；
// 如果异步函数中有抛出异常(产生了错误), 这个异常不会被立即浏览器处理
// 进行如下处理: Promise.reject(error)
async function foo() {
console.log("---------1")
console.log("---------2")
// "abc".filter()
throw new Error("coderhhh async function error")
console.log("---------3")
return 123
}
// promise -> pending -> fulfilled/rejected
foo().then(res => {
console.log("res:", res)
}).catch(err => {
console.log("coderhhh err:", err)
console.log("继续执行其他的逻辑代码")
})
2_await关键字
async函数特殊之处是可以在它内部使用await关键字，而普通函数中是不可以的。
await关键字的特点？
- await后面通常有一个表达式，这个表达式会返回一个Promise；
- await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数；
如果await后面是一个普通的值，会直接返回这个值；
如果await后面是一个thenable的对象，会根据对象的then方法调用来决定后续的值；
如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的reject值；
// await条件: 必须在异步函数中使用
function bar() {
console.log("bar function")
return new Promise(resolve => {
setTimeout(() => {
resolve(123)
}, 2000) //等待2秒钟
})
}
async function foo() {
console.log("-------")
// await后续返回一个Promise, 那么会等待Promise有结果之后, 才会继续执行后续的代码
const res1 = await bar()
console.log("await后面的代码:", res1) //await后面的代码: 123【等待2秒后，才打印】
const res2 = await bar()
console.log("await后面的代码:", res2)// await后面的代码: 123 【等待2秒后，才打印
console.log("+++++++")//+++++++
}
foo()
await处理异步请求
function requestData(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(url)
// reject("error message") //如果返回的Promise状态是reject，浏览器的控制台会抛出异常信息
}, 2000);
})
}
async function getData() {
const res1 = await requestData("hhh") //返回的Promise状态是resolve，则继续往下执行代码
console.log("res1:", res1)
const res2 = await requestData(res1 + "kobe")
console.log("res2:", res2)
}
getData().catch(err => { //如果返回的Promise状态是reject，浏览器的控制台会抛出异常信息
console.log("err:", err) //err: error message
})
2_浏览器进程、线程
2.1_进程和线程
线程和进程是操作系统中的两个概念：进程>>线程
- 进程（process）：计算机已经运行的程序，是操作系统管理程序的一种方式；
- 线程（thread）：操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中；
听起来很抽象，解释：
- 进程：可以认为，启动一个应用程序，就会默认启动一个进程（也可能是多个进程）；
- 线程：每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程；
- 所以也可以说进程是线程的容器；
一个形象的例子解释：
- 操作系统类似于一个大工厂；
- 工厂中里有很多车间，这个车间就是进程；
- 每个车间可能有一个以上的工人在工厂，这个工人就是线程；
2.2_操作系统的工作方式
如何同时让多个进程（边听歌、边写代码、边查阅资料）同时工作？
- CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换；
- 当进程中的线程获取到时间片时，就可以快速执行编写的代码；
- 对于用户来说是感受不到这种快速的切换的；
可以在Mac的活动监视器或者Windows的资源管理器中查看到很多进程：
2.3_浏览器中的JavaScript线程
JavaScript是单线程的，但是JavaScript的线程应该有自己的进程：浏览器或者Node。
浏览器是一个进程吗，它里面只有一个线程吗？
- 目前多数的浏览器都是多进程的，当打开一个新页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成所有页面无法响应，导致整个浏览器需要强制退出；
- 每个进程中有很多的线程，其中包括执行JavaScript代码的线程；
JavaScript的代码执行是在一个单独的线程中执行的：
- 这就意味着JavaScript的代码，在同一个时刻只能做一件事；
- 如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；
所以真正耗时的操作，实际上并不是由JavaScript线程在执行的：
- 浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作；
- 比如网络请求、定时器，只需要在特性的时候执行应该有的回调即可；
2.4_浏览器的事件循环
在执行JavaScript代码的过程中，有异步操作？
- 中间插入了一个setTimeout的函数调用；
- 这个函数被放到入调用栈中，执行会立即结束，并不会阻塞后续代码的执行；
2.3_宏任务和微任务
事件循环中并非只维护着一个队列，事实上是有两个队列：
- 宏任务队列（macrotask queue）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等
- 微任务队列（microtask queue）：Promise的then回调、 Mutation Observer API、queueMicrotask()等
事件循环对于两个队列的优先级？
- main script中的代码优先执行（编写的顶层script代码）；
- 在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行
- 也就是宏任务执行之前，必须保证微任务队列是空的；
- 如果不为空，那么就优先执行微任务队列中的任务（回调）；
2.4_Promise面试题
给出下列代码的正确执行顺序（也就是打印顺序），先自己理解了，再看代码运行结果。
题一
console.log("script start")
setTimeout(function () {
console.log("setTimeout1");
new Promise(function (resolve) {
resolve();
}).then(function () {
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then4");
});
console.log("then2");
});
});
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("then1");
});
setTimeout(function () {
console.log("setTimeout2");
});
console.log(2);
queueMicrotask(() => {
console.log("queueMicrotask1")
});
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then3");
});
console.log("script end")
【详细解题】找出对应main javascrip、微任务、宏任务的代码。
[[main javascrip]]（由上到下的代码排列）
console.log("script start")；
new Promise(function (resolve) {
console.log("promise1");
resolve();
})
console.log(2);
new Promise(function (resolve) {
resolve();
})
console.log("script end")
[[微任务]]
Promise.then()
queueMicrotask()
[[宏任务]]
setTimeout() 所以该函数内的promise启动需等待该函数执行后
【详细解题】【具体的逻辑】
（1）先把main javascrip代码执行完毕，即打印出的前四行。
script start
promise1
2
script end
（2）执行微任务的代码。
除去已经打印的main javascrip，看到setTimeout() 函数先跳过；由代码的上下熟悉怒，于是进入这个微任务内部。
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("then1");
});
老样子，根据main javascrip、微任务、宏任务的顺序。由于console.log("promise1");已经执行过，继续往下。即来到.then()方法内，于是执行console.log("then1")，打印then1。
继续往下，来到下面这个微任务内部。由于只有内部简单，执行 console.log("queueMicrotask1")，打印queueMicrotask1。
queueMicrotask(() => {
console.log("queueMicrotask1")
});
继续往下，来到下面这个微任务内部。main JavaScript没有打印，故往下进入.then（）内部，执行console.log("then3")，打印then3。
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then3");
});
至此，当前微任务执行完毕，可进行宏任务的执行。
（3）来到宏任务。
按照上下顺序，来到这个宏任务内部。
setTimeout(function () {
console.log("setTimeout1");
new Promise(function (resolve) {
resolve();
}).then(function () {
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then4");
});
console.log("then2");
});
});
先找到main JavaScript的打印代码并执行。可见，在该宏任务内部，出来含有.then()方法的，都属于微任务，跳过。即可打印setTimeout1和then2。轮到微任务执行。进入.then（）方法，打印then4。该函数执行完毕。
往下走，来到下面的宏任务。内部不复杂，直接打印setTimeout2。
setTimeout(function () {
console.log("setTimeout2");
});
题二
加入了异步函数，考察对await的理解
async function async1 () {
console.log('async1 start')
await async2();
console.log('async1 end')
}
async function async2 () {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0)
async1();
new Promise (function (resolve) {
console.log('promise1')
resolve();
}).then (function () {
console.log('promise2')
})
console.log('script end')
【详细解题】找出对应main javascrip、微任务、宏任务的代码。
[[main javascrip]]（由上到下的代码排列）
console.log('script start')
async1();
console.log('script end')
[[微任务]]
async2 ()
[[宏任务]]
setTimeout() 虽然该函数的时间设置为0，但是根据定义，是宏任务，就必须等前面两项执行完毕。
【详细解题】【具体的逻辑】
（1）先把main javascrip代码执行。
前面两个函数定义，但是未执行，故打印script start。
遇到setTimeout（）函数，直接归类到宏任务队列。
进入async1（）函数，打印 async1 start。
async1（）函数由于遇到await，先执行async2()函数，故打印async2。
但需要将其后代码console.log('async1 end')加入到微任务队列。
至此，async1（）函数执行完毕
遇到new Promise（）函数，进入执行console.log('promise1')，故打印promise1。
遇到new Promise（）函数的.then（）函数，添加到微任务队列。
至此，new Promise（）函数执行完毕。
遇到console.log('script end')，打印script end。
（2）执行微任务的代码。
console.log('async1 end')
new Promise（）函数的.then（）函数
微任务队列，按照先来后到顺序，先打印async1 end，后打印promise2。
至此，微任务执行完毕。
（3）执行宏任务。
宏任务只有一个 setTimeout（）函数，不复杂，直接打印setTimeout。
setTimeout(function () {
console.log('setTimeout')
}, 0)
