手写一个Promise

JavaScript

2022-01-09

138

从异步说起

我们知道，JavaScript是单线程的。JavaScript设计成单线程的原因，是因为最初它就是为了浏览器操作DOM的而生的，而单线程恰恰能保证页面的上的DOM操作是可预期的。

为了防止线程长时间被某项任务所阻塞，JavaScript设计了一种事件循环（Event Loop）的机制，这种机制可以将某些需要占用较长时间的任务完成后所要做的任务放入一个异步队列中，等待所有同步任务完成后再去执行异步任务，这也就是所谓的回调函数的由来。

下图是一个事件循环的示意图：

异步任务有哪些类型？

任务队列中的异步任务分为宏任务和微任务，他们是两个不同的队列。

宏任务包含以下内容：

setTimeout/setInterval
I/O 、 Ajax
事件（onclick...）
postMessage
UI渲染

微任务包含以下内容：

Promise.then()
MutationObserver
process.nextTick(Node.js)

javascript引擎会优先处理微任务，然后再去处理宏任务。

什么是promise？为什么使用promise？

先来谈谈普通回调实现异步所带来的弊病，也就是回调地狱（回调黑洞）问题。

比方说，处理Ajax请求，回调函数形式为：

$.get("http://localhost/a.json",function(data){
    console.log(data);
    // Do something... 1
    $.get("http://localhost/b.json",function(data){
        console.log(data);
        // Do something... 3
        $.get("http://localhost/c.json",function(data){
            console.log(data);
            // Do something... 5
        })
        // Do something else... 4
    })
    // Do something else... 2
})

可以看到，普通的回调函数主要有以下缺点：

代码书写是不自然的，代码从上而下书写的顺序和执行的顺序不一致。阅读代码需要反复上下切换，十分费劲。
过多的嵌套、缩进使得代码不优雅，不简洁。
回调信任问题，在使用第三方代码时，调用回调函数的时机是不能完全被掌握的（过早、晚？，调用次数？，回调内容？）。

而我们使用promise后语法会简洁明了很多：

axios.get("http://localhost/a.json")
    .then(data=>{
        console.log(data);
        return axios.get("http://localhost/b.json")
    })
    .then(data=>{
        console.log(data);
        return axios.get("http://localhost/c.json")
    })
    .then(data=>{
        console.log(data);
    })

当我们实现使用了Async 和 Await语法糖后，代码还会更加简洁：

(async ()=>{
    let data;
    data = await axios.get("http://localhost/a.json");
    console.log(data);
    data = await axios.get("http://localhost/b.json");
    console.log(data);
    data = await axios.get("http://localhost/c.json");
    console.log(data);
})()

什么是Promise？

Promise是一种处理javascript异步的一种方式，可以有效解决回调地狱问题。

Promise实例接收一个executor函数，其又接收两个参数，一个为 onfulfilled，另一个为onrejected。

Promise实例都有一个than()方法，它接受事件完成后的回调值。

举一个例子，用Promise实现一个sleep函数：

function sleep(time){
    return new Promise((resolve, reject)=>{
        setTimeout(resolve, time)
    })
}

sleep(100).then(()=>{
    console.log("A")
    return sleep(100);
}).then(()=>{
    console.log("B")
    return sleep(100);
}).then(()=>{
    console.log("C")
})


// Async Await写法：
(async ()=>{
    await sleep(100);
    console.log("A");
    await sleep(100);
    console.log("B");
    await sleep(100);
    console.log("C");
})()