从回调地狱转换为承诺

时间:2018-04-15 20:33:11

标签: javascript es6-promise

我一直在学习如何使用愚蠢的回调地狱回调。

这是我创建的一个示例:https://jsfiddle.net/1donpcvv/

它按预期工作。 step1()必须先完成,然后转到step2(),然后再转到step3()

我正在努力转换为我正努力让它发挥作用的承诺。我做错了什么?

JS:

function step1() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Step 1 done After 3 seconds");
            resolve();
        }, 3000);
    });
}

function step2() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Step 2 done After 2 seconds");
            resolve();
        }, 2000);
    });
}

function step3() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Step 3 done After 1 seconds");
            resolve();
        }, 1000);
    });
}

用法

step1().then().step2().then().step3();

2 个答案:

答案 0 :(得分:1)

链接承诺的语法是:

step1().then(step2).then(step3);

...所以你向then提供了回调参数。

在可能使用承诺值和/或参数的不太常见的情况下,您可以使用bind或内联函数表达式:

step1().then(result => step2(result)).then(result2 => step3(result2));

答案 1 :(得分:0)

欢迎使用async/await语法

async function bar () {
    await step1();
    await step2();
    await step3();
}

bar()
  .then(() => {/*After bar execution here*/})
  .catch(err => console.error('some step reject', err))

function step1() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Step 1 done After 3 seconds");
            resolve();
        }, 3000);
    });
}

function step2() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Step 2 done After 2 seconds");
            resolve();
        }, 2000);
    });
}

function step3() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Step 3 done After 1 seconds");
            resolve();
        }, 1000);
    });
}

您可以使用try...catch

管理拒绝
async function bar () {
    try {
        await step1();
        await step2();
        await step3();
    } catch (e) {
        console.error('some step reject', e)
    }
}

酒吧就像

bar().then(() => {/*After bar execution here*/})

async function foo () {
    await bar()
}