Javascript 承诺没有按预期工作

Question

Here I declared my promise.

   const fetchmessage= new Promise(
            (resolve,reject)=>{
              this.props.authStore.verifyLocalToken();
              console.log("VLT Resolve");
              resolve("Completed");
            }
            );

          fetchmessage.then(this.props.inboxStore.inboxMessageFetch(mobileNumber,firebaseToken));

The following is my verifyLocalToken code

   verifyLocalToken() {
    console.log("VerifyLT - Start");
        fetch('http://xxx.xxx.xxx.xxx:8000/api/VerifyLocalToken', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: `mobileNumber=${this.mobileNumber}&key=${this.key}`
        }).then((response) => response.json()).then(
            (responseJson) => {
                console.log("http request v l t --", responseJson);
                this.firebaseToken = responseJson.firebaseToken;
            }).catch(
            (error) => {
                console.error(error);
            }
        )
        console.log("VerifyLT - Stop");

}

Following is my inboxMessageFetch code

inboxMessageFetch(mobileNumber,firebaseToken) {
        console.log("InboxFetch  --", `${mobileNumber}/inbox`,firebaseToken);

            firebase.database().ref(`${mobileNumber}/inbox`)
                .on('value', snapshot => {
                    console.log('FB', snapshot.val());
                })
    }

The output is like this

Shouldn't http request vlt comes before InboxFetch -- 8891468710/inbox undefined , because HTTP request belongs to the promise and the inbox fetch we asked to run after fetching the HTTP request?

How to refactor the code and make sure the HTTP request completed and then call the inbox fetch function?

Answer 1

There are several issues here.

1. The line

   fetchmessage.then(this.props.inboxStore.inboxMessageFetch(mobileNumber,firebaseToken));

   ... calls this.props.inboxStore.inboxMessageFetch(mobileNumber,firebaseToken) and passes its return value into then , exactly like foo(bar()) calls bar and then passes its return value into foo . You probably meant to pass in a function, eg

   fetchmessage.then(() => this.props.inboxStore.inboxMessageFetch(mobileNumber,firebaseToken));

2. You're not waiting for verifyLocalToken 's work, which is asynchronous, to complete before you continue with the execution of fetchmessage .

3. (Related to #2) verifyLocalToken doesn't provide any way for the caller to know it's work is done; it needs to return a promise.

4. (Related to #2 & #3) You already have a promise, from fetch , in verifyLocalToken ; so there's no need to create a new promise to save in fetchmessage . Any time you have a promise, use then , don't use the new Promise anti-pattern.

5. fetchmessage sounds like a function name to me, but in your code, it's a variable that will receive a promise, not a function.

Here's roughly how that stuff should look (note the *** comments):

verifyLocalToken() {
    console.log("VerifyLT - Start");
    // *** Return the promise from `then`
    return fetch('http://xxx.xxx.xxx.xxx:8000/api/VerifyLocalToken', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `mobileNumber=${this.mobileNumber}&key=${this.key}`
    }).then((response) => response.json()).then(
        (responseJson) => {
            console.log("http request v l t --", responseJson);
            this.firebaseToken = responseJson.firebaseToken;
        }).catch(
        (error) => {
            console.error(error); // *** You're converting failure to success
                                  // with `undefined` here, which isn't
                                  // a good idea. Re-throw the error.
            throw error;
        })
    // *** If you want to show something when this finishes, do it
    // in a `then` handler
    ).then(value => {
        console.log("VerifyLT - Stop");
        return value;
    });
}

Then fetchmessage :

const fetchmessage = this.props.authStore.verifyLocalToken()
    .then(value => {
        console.log("VLT Resolve");
        return "Completed"; // *** Really convert the value to completed?
    });

...and if you want to then separate the call to then :

fetchmessage.then(result => this.props.inboxStore.inboxMessageFetch(mobileNumber, firebaseToken));

That's a sketch of what you need to do, not meant to be copied-and-pasted directly. Think the changes through and apply them as necessary.

Remember that promises are a pipeline where each handler gets to transform the value as it goes through.

Answer 2

      fetchmessage.then(this.props.inboxStore.inboxMessageFetch(mobileNumber,firebaseToken));

This code is directly calling the inboxMessageFetch function and not waiting for the then. I think the correct code is

fetchmessage.then(() =>      
    this.props.inboxStore.inboxMessageFetch(mobileNumber,firebaseToken);
)

Answer 3

You don't need to make a new promise, but you do need to return the promises from your methods your verifyLocalToken method should look like this

 verifyLocalToken() {
    return fetch('http://xxx.xxx.xxx.xxx:8000/api/VerifyLocalToken', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: `mobileNumber=${this.mobileNumber}&key=${this.key}`
        }).then((response) => response.json()).then(
            (responseJson) => {
                console.log("http request v l t --", responseJson);
                this.firebaseToken = responseJson.firebaseToken;
            }).catch(
            (error) => {
                console.error(error);
            }
        )
        console.log("VerifyLT - Stop");

}

Then you can just do this

const fetchmessage = this.props.authStore.verifyLocalToken();
fetchmessage.then(() => {
    this.props.inboxStore.inboxMessageFetch(mobileNumber,firebaseToken));
}