简体   繁体   中英

How to call this promise chain right

I use the following code with blueBird lib but in the console I got error :

Uncaught TypeError: Cannot read property 'then' of undefined

And I dont see the console.log in the then ([SUCESS]) why?

I've two files 1.index.html with the following code

<html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.1.1/bluebird.js'></script>
  1. and script.js with the following code

 var stepOne = new Promise(function (resolve, reject) { setTimeout(function () { console.log("Step 1 -->Successfully Resolving"); resolve(); }, 5000); setTimeout(function () { console.log("Step 1 -->First timeout, rejecting the promise"); reject(); }, 2000); }).catch(function () { console.log("Step 1 -->Timed out 1 ... retrying"); }); var stepTwo = new Promise(function (resolve, reject) { setTimeout(function () { console.log("Step 2 -->Successfully Resolving Step two"); resolve(); }, 5000); setTimeout(function () { console.log("Step 2 -->First timeout, rejecting the promise"); reject(); }, 2000); }).catch(function () { console.log("Step 2 -->timed out 2 ... retrying"); }); stepOne.then(function () { console.log("[SUCCESS] Step 1"); }).stepTwo.then(function () { console.log("[Success] Step 2"); }) 

You have a bit of a misunderstanding about what a Promise is. A Promise is a proxy for a value , not for an action . Code passed to the Promise constructor is executed immediately , so your code will always run all at once, and not one after another. (You can't "run" a Promise just like you can't "run" a Number or a Boolean. You can, however, run a function)

What you want to do is have step1 and step2 functions which return a Promise .

const step1 = () => new Promise(...); // Step 1 code in this promise
const step2 = () => new Promise(...); // Step 2 code in this promise

// By this point, nothing runs, we only defined functions.

step1() // Run step one
  .then(() => console.log('[SUCCESS] Step 1');
  .then(step2); // Run step two
  .then(() => console.log('[SUCCESS] Step 2');

You can't chain like this

stepOne.then(function () {

}).stepTwo.then(function () {

as you're trying to access the stepTwo property of the returned result from then , which doesn't have a stepTwo property.

You have to do it like this, keeping the variables (and promises) separate

stepOne.then(function () {
    console.log("[SUCCESS] Step 1");
});

stepTwo.then(function () {
        console.log("[Success] Step 2");
});

or if you want to wait for all promises to finish, you can use Promise.all

Promise.all([stepOne, stepTwo]).then(function() {
    console.log("both");
});

If you need stepOne to happen before stepTwo does, you should do as follows:

var stepOne = function() {
    var stepOnePromise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Step 1 -->Successfully Resolving");
            resolve();
        }, 5000);
        setTimeout(function () {
            console.log("Step 1 -->First timeout, rejecting the promise");
            reject();
        }, 2000);
    }).catch(function () {
        console.log("Step 1 -->Timed out 1 ... retrying");
    });
    return stepOnePromise;
}

var stepTwo = function() {
    var stepTwoPromise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Step 2 -->Successfully Resolving Step two");
            resolve();
        }, 5000);
        setTimeout(function () {
            console.log("Step 2 -->First timeout, rejecting the promise");
            reject();
        }, 2000);
    }).catch(function () {
        console.log("Step 2 -->timed out 2 ... retrying");
    });
    return stepTwoPromise;
}

stepOne().then(function () {
    console.log("[SUCCESS] Step 1");
})
.then(stepTwo)
.then(function () {
    console.log("[Success] Step 2");
});

I have to add, though, that right now the console.log (that says 'success') as well as stepTwo will be called when rejecting the first promise (after the inner catch handles it) and then resolving it has no meaning. I guess this is only an abstraction of the code, and your retrial mechanism is different, so it might work as wanted anyway...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM