await、async、事件循环
1 async、await
异步函数 async function
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 普通函数// function foo() {}// const bar = function() {}// const baz = () => {}// 生成器函数// function* foo() {}// 异步函数async function foo() {console.log("foo function1")console.log("foo function2")console.log("foo function3")}foo()// const bar = async function() {}// const baz = async () => {}// class Person {// async running() {}// }</script></body>
</html>
异步函数的执行流程
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 返回值的区别// 1.普通函数// function foo1() {// return 123// }// foo1()// 2.异步函数async function foo2() {// 1.返回一个普通的值// -> Promise.resolve(321)return ["abc", "cba", "nba"]// 2.返回一个Promise// return new Promise((resolve, reject) => {// setTimeout(() => {// resolve("aaa")// }, 3000)// })// 3.返回一个thenable对象// return {// then: function(resolve, reject) {// resolve("bbb")// }// }}foo2().then(res => {console.log("res:", res)})foo2().then(res =>{})</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// "abc".filter()// 什么情况下异步函数的结果是rejected// 如果异步函数中有抛出异常(产生了错误), 这个异常不会被立即浏览器处理// 进行如下处理: Promise.reject(error)async function foo() {console.log("---------1")console.log("---------2")// "abc".filter()throw new Error("coderwhy async function error")console.log("---------3")// return new Promise((resolve, reject) => {// reject("err rejected")// })return 123}// promise -> pending -> fulfilled/rejectedfoo().then(res => {console.log("res:", res)}).catch(err => {console.log("coderwhy err:", err)console.log("继续执行其他的逻辑代码")})</script></body>
</html>
await关键字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 1.普通函数// function foo1() {// await 123// }// foo1()// 2.await关键字// await条件: 必须在异步函数中使用function bar() {console.log("bar function")return new Promise(resolve => {setTimeout(() => {resolve(123)}, 100000)})}async function foo() {console.log("-------")// await后续返回一个Promise, 那么会等待Promise有结果之后, 才会继续执行后续的代码const res1 = await bar()console.log("await后面的代码:", res1)const res2 = await bar()console.log("await后面的代码:", res2)console.log("+++++++")}foo()</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function requestData(url) {return new Promise((resolve, reject) => {setTimeout(() => {resolve(url)// reject("error message")}, 2000);})}async function getData() {const res1 = await requestData("why")console.log("res1:", res1)const res2 = await requestData(res1 + "kobe")console.log("res2:", res2)}getData().catch(err => {console.log("err:", err)})</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 1.定义一些其他的异步函数function requestData(url) {console.log("request data")return new Promise((resolve) => {setTimeout(() => {resolve(url)}, 3000)})}async function test() {console.log("test function")return "test"}async function bar() {console.log("bar function")return new Promise((resolve) => {setTimeout(() => {resolve("bar")}, 2000);})}async function demo() {console.log("demo function")return {then: function(resolve) {resolve("demo")}}}// 2.调用的入口async函数async function foo() {console.log("foo function")const res1 = await requestData("why")console.log("res1:", res1)const res2 = await test()console.log("res2:", res2)const res3 = await bar()console.log("res3:", res3)const res4 = await demo()console.log("res4:", res4)}foo()</script></body>
</html>
2 浏览器进程、线程
进程和线程
操作系统 – 进程 – 线程
操作系统的工作方式
浏览器中的JavaScript线程
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>按钮</button><script>const btn = document.querySelector("button")btn.onclick = function() {console.log("btn click event")}console.log("Hello World")let message = "aaaa"message = "bbbb"setTimeout(() => {console.log("10s后的setTimeout")}, 0);console.log("Hello JavaScript")console.log("代码继续执行~~~")console.log("-------------")</script></body>
</html>
浏览器的事件循环
3 宏任务、微任务队列
宏任务和微任务
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>console.log("script start")// function bar() {// console.log("bar function")// }// function foo() {// console.log("foo function")// bar()// }// foo()// 定时器setTimeout(() => {console.log("setTimeout0")}, 0)setTimeout(() => {console.log("setTimeout1")}, 0)// Promise中的then的回调也会被添加到队列中console.log("1111111")new Promise((resolve, reject) => {console.log("2222222")console.log("-------1")console.log("-------2")resolve()console.log("-------3")}).then(res => {console.log("then传入的回调: res", res)})console.log("3333333")console.log("script end")</script></body>
</html>
4 Promise面试题解析
Promise面试题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>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")</script></body>
</html>
promise async await 面试题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>console.log("script start")function requestData(url) {console.log("requestData")return new Promise((resolve) => {setTimeout(() => {console.log("setTimeout")resolve(url)}, 2000);})}// 2.await/asyncasync function getData() {console.log("getData start")const res = await requestData("why")console.log("then1-res:", res)console.log("getData end")}getData()console.log("script end")// script start// getData start// requestData// script end// setTimeout// then1-res: why// getData end</script></body>
</html>
Node的事件循环
Node事件循环的阶段
Node事件循环的阶段图解
Node的宏任务和微任务
Node事件循环的顺序
Node执行面试题
5 throw、try、catch
错误处理方案
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>按钮</button><script>// 1.遇到一个错误, 造成后续的代码全部不能执行// function foo() {// "abc".filter()// console.log("第15行代码")// console.log("-------")// }// foo()// console.log("+++++++++")// const btn = document.querySelector("button")// btn.onclick = function() {// console.log("监听btn的点击")// }// 2.自己封装一些工具function sum(num1, num2) {if (typeof num1 !== "number") {throw "type error: num1传入的类型有问题, 必须是number类型"}if (typeof num2 !== "number") {throw "type error: num2传入的类型有问题, 必须是number类型"}return num1 + num2}// 李四调用const result = sum(123, 321)</script></body>
</html>
throw关键字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>class HYError {constructor(message, code) {this.errMessage = messagethis.errCode = code}}// throw抛出一个异常// 1.函数中的代码遇到throw之后, 后续的代码都不会执行// 2.throw抛出一个具体的错误信息function foo() {console.log("foo function1")// 1.number/string/boolean// throw "反正就是一个错误"// 2.抛出一个对象// throw { errMessage: "我是错误信息", errCode: -1001 }// throw new HYError("错误信息", -1001)// 3.Error类: 错误函数的调用栈以及位置信息throw new Error("我是错误信息")console.log("foo function2")console.log("foo function3")console.log("foo function4")}function bar() {foo()}bar()</script></body>
</html>
Error类型
异常的处理
异常的捕获
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function foo() {console.log("foo function1")// throw new Error("我是错误信息")console.log("foo function2")console.log("foo function3")console.log("foo function4")}function test() {// 自己捕获了异常的话, 那么异常就不会传递给浏览器, 那么后续的代码可以正常执行try {foo()console.log("try后续的代码")} catch(error) {console.log("catch中的代码")// console.log(error)} finally {console.log("finally代码")}}function bar() {test()}bar()console.log("--------")</script></body>
</html>
6 浏览器存储Storage
认识Storage
localStorage和sessionStorage的区别
Storage常见的方法和属性
