ES6 promise

最新推荐文章于 2025-12-19 15:51:19 发布

原创最新推荐文章于 2025-12-19 15:51:19 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

ES6 专栏收录该内容

10 篇文章

订阅专栏

promise:

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

什么是异步？

异步(async)是相对于同步(sync)而言的，很好理解。

同步就是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务。而异步比如：

        setTimeout(function cbFn(){
            console.log('learnInPro'); // 后打印 learnInpro
        }, 1000);
        console.log('sync things');  // 先打印 sync things

setTimeout就是一个异步任务，当JS引擎顺序执行到setTimeout的时候发现他是个异步任务，则会把这个任务挂起，继续执行后面的代码。直到1000ms后，回调函数cbFn才会执行，这就是异步，在执行到setTimeout的时候，JS并不会傻呵呵的等着1000ms执行cbFn回调函数，而是继续执行了后面的代码。

为啥要在JS中使用异步？

由于javascript是单线程的，只能在JS引擎的主线程上运行的，所以js代码只能一行一行的执行，不能在同一时间执行多个js代码任务，这就导致如果有一段耗时较长的计算，或者是一个ajax请求等IO操作，如果没有异步的存在，就会出现用户长时间等待，并且由于当前任务还未完成，所以这时候所有的其他操作都会无响应。

现在我们知道了单线程的JS为了不出现长时间等待的状况，会使用异步来处理。比如当执行一个ajax操作的时候，当js发出请求后，不会傻了吧唧的在那里等着服务器数据返回，而是去继续执行后面的任务，等到服务器数据返回以后再通知js引擎去处理。

常见的异步模式有哪些？

回调函数
事件监听
发布/订阅模式（又称观察者模式）
promise

JS如何实现异步

具体JS是如何实现异步操作的呢？

答案就是JS的事件循环机制(Event Loop)。

具体来说：

当JS解析执行时，会被引擎分为两类任务，同步任务（synchronous） 和 异步任务（asynchronous）。

对于同步任务来说，会被推到执行栈按顺序去执行这些任务。
对于异步任务来说，当其可以被执行时，会被放到一个 任务队列（task queue） 里等待JS引擎去执行。

当执行栈中的所有同步任务完成后，JS引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，就叫做事件循环(Event Loop)。

回调函数：

回调函数是异步操作最基本的方法。

比如：我有一个异步操作(asyncFn)，和一个同步操作(normalFn)

function asyncFn() {
    setTimeout(() => {
        console.log('asyncFn');
    }, 0)
}

function normalFn() {
    console.log('normalFn');
}

asyncFn();
normalFn();

// normalFn
// asyncFn

如果按照正常的JS处理机制来说，同步操作一定发生在异步之前。如果我想要将顺序改变，最简单的方式就是使用回调的方式处理。

function asyncFn(callback) {
    setTimeout(() => {
        console.log('asyncFn');
        callback();
    }, 0)
}

function normalFn() {
    console.log('normalFn');
}

asyncFn(normalFn);

// asyncFn
// normalFn

promise：

Promise是ES6推出的一种异步编程的解决方案。

ES6中Promise的用法：

var p = new Promise(function async(resolve, reject){
    // 这里是你的异步操作
    setTimeout(function(){
        if(true){
            resolve(val);
        }else{
            reject(error);
        }
    }, 1000)
})

p.then(function(val){
    console.log('resolve');
}, function(){
    console.log('reject');
})

首先，ES6规定Promise是个构造函数，其接受一个函数作为参数如上面代码中的async函数，此函数有两个参数，resolve、reject分别对应成功失败两种状态，我们可以选择在不同时候执行resolve或者reject去触发下一个动作，执行then方法里的函数。

function asyncFn1() {
    console.log('asyncFn1 run');
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve();
        }, 1000)
    })
}

function asyncFn2() {
    console.log('asyncFn2 run');
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve();
        }, 1000)
    })
}

function normalFn3() {
    console.log('normalFn3 run');
}

asyncFn1().then(asyncFn2).then(normalFn3);

参考文章：https://www.cnblogs.com/learninpro/p/9271813.html