一、Promise
异步操作，解决 callback hell 问题
三种状态： pending, resolved, rejected
状态的表现和变化，pending ->resolved pending ->rejected，变化不可逆then 正常状态返回 resolved ，有报错则返回 rejected
catch 正常状态返回 resolved ，有报错则返回 rejected
二、 async 和 await
同步语法，消灭异步回调函数，async/await只是一个语法糖
await 函数后面的都属于回调-
async/await 与 promise 的关系
- 执行async 函数，返回的是 promise 对象
- await 相当于 promise 的 then
- try...catch 可以捕获异常，代替了 promise 的 catch
async function fn(){
return 100
}
(async function(){
const a = fn // 返回上面的函数
const b = await fn() // 返回 100
})()
三、event loop
image.png
借用双越老师的一张图具体讲解，先来一个简单版的：
- 将第一行代码 console.log('Hi') 放入Call Stack（调用栈）
- 执行，浏览器打印出 Hi
- 清空 Call Stack
- 将setTimeout 方法放入 Call Stack，执行发现这个是个异步函数，先推入 web API 清空 Call Stack
- 将最后一行代码 console.log('Bye') 推入 Call Stack ，执行，打印出 Bye，清空 Call Stack
- 此时所有同步代码执行完毕
- Event Loop 开始启动，轮询查找 Callback Queue里是否有可执行的语句
- 时机到（定时，网络请求，用户操作等），将里面可以执行的代码推入 Callback Queue
- Event Loop 查到有可执行语句，将此语句推入 Call Stack ，执行，打印出 cb1，清空 Call Stack
- Event Loop 继续轮询查找（永动机）
四、宏任务和微任务
宏任务：setTimeout， setInterval， Ajax，DOM 事件
微任务：promise，async/await
微任务比宏任务执行时机要早
image.png
依然是双越老师的图，我们再讲一次升级版的浏览器执行方式：
- 首先依然是按照代码顺序，将代码推入 Call Stack
- 同步代码，执行，清空 Call Stack
- Call Stack 中发现代码是 promise 或者 async/await 代码，执行，将回调代码放入micro task queue
- Call Stack 中发现代码是 setTimeout 或者 DOM 操作等等，执行，将回调代码放入 web APIs
- 此时同步代码执行完毕
- Event Loop 开始启动
- 开始执行微任务，将 micro task queue 的代码推入 callback queue，触发 Event Loop 将此代码推入 Call Stack ，执行，清空
- 微任务执行完毕
- 尝试 DOM 渲染
- 执行宏任务，时机到时，将 Web APIs 里的代码推入 callback queue，触发 Event Loop 将此代码推入 Call Stack ，执行，清空
- Event Loop 继续轮询查找（永动机）
宏任务和微任务的区别
- 宏任务： DOM 渲染后触发，由 ES6 语法规定（执行前推入micro task queue）
- 微任务： DOM 渲染前触发，由浏览器规定的（执行前推入 Web APIs栈中）
四、for of
一个异步遍历方法，话不多说，直接贴代码
// for of
function muti(num) {
const a = new Promise(resolve => {
setTimeout(() => {
resolve(num * num)
}, 1000)
})
return a;
}
let arr = [2, 4, 6]
!(async function(){
for(let i of arr) {
const res = await muti(i)
console.log(res)
}
})()
手写一个 ajax 方法
// 手写一个 ajax 方法
function ajax(url){
const p = new Promise((resolve,reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET',url,true)
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
console.log(xhr);
resolve(JSON.parse(xhr.response))
} else {
reject(new Error('404 not found'))
}
}
}
xhr.send(null)
})
return p
}
// 试一下
const url = 'http://demo.mall.10010.com:8104/scaffold-app/scaffold/queryPagealiasProData?page_alias=two-in-one'
ajax(url).then((res) => {
console.log(res);
}).catch(err => console.log(err))
手写深度比较
// 手写深度比较
function isObject(obj) {
return typeof obj === 'object' && obj != null
}
function isEqual (obj1, obj2) {
if(!isObject(obj1) || !isObject(obj2)) {
return obj1 === obj2
}
if (obj1 === obj2) {
return true;
}
const obj1Key = Object.keys(obj1)
const obj2Key = Object.keys(obj2)
if (obj1Key.length != obj2Key.length) {
return false
}
for(let key in obj1) {
const res = isEqual(obj1[key], obj2[key])
if(!res){
return false
}
}
return true
}
jsonp 原理（不是真正的 ajax）
几个方面来解答：
- 浏览器同源策略和跨域
- 哪些 html 标签可以绕过跨域（Image script）
- 利用 script 封装成 jsonp
