前端学习总结一： Js 异步进阶

一、Promise

1. 异步操作，解决 callback hell 问题

2. 三种状态： pending, resolved, rejected
   状态的表现和变化，pending ->resolved pending ->rejected，变化不可逆

3. then 正常状态返回 resolved ，有报错则返回 rejected
   catch 正常状态返回 resolved ，有报错则返回 rejected

二、 async 和 await

1. 同步语法，消灭异步回调函数，async/await只是一个语法糖
   await 函数后面的都属于回调

2. 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