关于 【顺序执行Promise】 的一些理解

前言

　　近日工作上有一个需求，页面上有一个历史记录的东西，存储了最近使用的10张图片（大概知道下背景就好，不用深究）每一次页面刷新，ready后，要去服务器拉取那几张图片的URL，以便在页面上展示，因为产品要求历史记录的图片要按使用的时间顺序排列展示，我想了一下，决定按顺序发起【拉取图片URL】的请求（不要问我为什么）。在使用过程中碰到了问题，网友的答案我不大满意，所以特此总结一下。

套路

　　处理这类问题的方法有以下两种：

• Promise链式执行
• 利用async/await

　　我姑且认为大家的Promise是这么发出去的：

/**
 * 不带参数
 */
function p1() {
    // ... 前置处理
    return new Promise((resolve, reject) => {
        // ... 业务代码

    })
}

p1().then(res => {
    // 后续处理
}, err => {
    // 后续处理
})

/**
 * 带参数
 */
function p1(param) {
    // ... 前置处理
    return new Promise((resolve, reject) => {
        // 业务代码

    })
}

p1(param).then(res => {
    // 后续处理
}, err => {
    // 后续处理
})

　　接下来我将分【带参数】和 【不带参数】两种情况，分别说明。

代码

不带参数

链式执行法

function p1() {
    return new Promise((resolve, reject) => {
        resolve(1);
    })
}

function p2() {
    return new Promise((resolve, reject) => {
        resolve(2);
    })
}

function queue(...t) {
    // 返回一个resolve状态的Promise对象，方便第一次在then中调用异步任务
    let _queue = Promise.resolve();
    let result = [];
    t.forEach(p => {
        _queue = _queue.then(p).then(res => {
            result.push(res);
            // 为了在最后一个then中获取到结果，因为then返回的是一个新的Promise实例
            // 如果在外层有存储结果的对象，这里就不用return
            return result;
        });
    });
    return _queue;
}

queue(p1, p2).then(res => {
    console.log(res); // [1, 2]
})

async/await法

function p1() {
    return new Promise((resolve, reject) => {
        resolve(1);
    }).then(() => {
        return "ok";
    })
}

function p2() {
    return new Promise((resolve, reject) => {
        resolve(2);
    })
}

async function exec() {
    // ... 前置处理
    let result = [];
    console.log("执行p1")
    let res1 = await p1();
    console.log("执行p2");
    let res2 = await p2();
    // ... 若干promise
    result.push(res1, res2);
    return Promise.resolve(result);
}

exec().then(res => {
    console.log(res); // ["ok", 2]
});

/**
 * 注意：此处的代码并不会等exec()函数执行结束后才执行
 * 因为在exec()中执行的Promise，一经发出会立即执行，then中的处理函数进入微任务队列，等宏任务执行完后，
 * 再来执行微任务队列中的所有函数，如此反复。所以此处的代码在第一个Promise发出后，就会执行。
 * 因为此文分享 [Promise顺序执行]，所以不过多谈及这个，但还是提一下吧。36  */
console.log("乱入");

这样也可以：

function p1() {
    return new Promise((resolve, reject) => {
        resolve(1);
    }).then(() => {
        return "ok";
    })
}

function p2() {
    return new Promise((resolve, reject) => {
        resolve(2);
    })
}

async function exec(...t) {
    // ... 前置处理
    let result = [];
    for (let p of t) {
        let res = await p();
        result.push(res);
    }
    return Promise.resolve(result);
}

exec(p1, p2).then(res => {
    console.log(res); // ["ok", 2]
});

带参数

链式执行法

function p1(id) {
    return new Promise((resolve, reject) => {
        resolve(id);
    })
}

function queue(ids) {
    // ... 前置处理
    let result = [];
    let _queue = Promise.resolve();
    ids.forEach(function(id) {
        _queue = _queue.then(() => {
            // 只有这样，后面那个then才可以获取到p1的执行结果
            return p1(id);
        }).then(res => {
            result.push(res);
            return result;
        })
    })
    return _queue;
}

queue([1, 2, 3]).then(res => {
    console.log(res); // [1, 2, 3]
})

这样也可以：

function p1(id) {
    return new Promise((resolve, reject) => {
        resolve(id);
    })
}

function queue(ids) {
    // ... 前置处理
    let result = [];
    let _queue = Promise.resolve();
    ids.forEach(function(id) {
        _queue = _queue.then(() => p1(id).then(res => {
            result.push(res);
            return result;
        }));
    })
    return _queue;
}

queue([1, 2, 3]).then(res => {
    console.log(res); // [1, 2, 3]
})

async/await法

function p1(id) {
    return new Promise((resolve, reject) => {
        resolve(id);
    })
}

async function exec(...ids) {
    // ... 前置处理
    let result = [];
    for (let id of ids) {
        let res = await p1(id);
        result.push(res);
    }
    return Promise.resolve(result);
}

exec(1, 2).then(res => {
    console.log(res); // [1, 2]
});