Why does using setTimeout in a promise chain break the chain, and how can it be fixed?

Using setTimeout on Promise Chain

Promises provide a sequential ordering of asynchronous operations, allowing developers to work with callback-based code as if it were synchronous. However, introducing delays between operations in a promise chain can pose challenges.

Question:

In the provided code snippet, a delay is attempted using setTimeout, but it results in a JSON parse error. Why does this occur, and how can it be resolved?

<code class="javascript">...
getLinks('links.txt').then(function(links){
    let all_links = (JSON.parse(links));
    globalObj=all_links;

    return getLinks(globalObj["one"]+".txt");

}).then(function(topic){
    writeToBody(topic);
    setTimeout(function(){
         return getLinks(globalObj["two"]+".txt"); // without setTimeout it works fine
         },1000);
});
...</code>

Answer:

The issue arises because setTimeout does not return a promise. By default, when you return a value from a promise chain, it is wrapped in a resolved promise object. However, since setTimeout returns a timer ID, the promise chain is broken, and the returned value is not treated as a promise.

To resolve this problem, the following approaches can be used:

1. Create a Delay Function Outside the Promise Chain:

Instead of using setTimeout, define a delay function that wraps the delay in a promise:

<code class="javascript">function delay(t, val) {
    return new Promise(resolve => setTimeout(resolve, t, val));
}</code>

Updated Code:

<code class="javascript">...
getLinks('links.txt').then(function(links){
    let all_links = (JSON.parse(links));
    globalObj=all_links;

    return getLinks(globalObj["one"]+".txt");

}).then(function(topic){
    writeToBody(topic);
    // return a promise here that will be chained to prior promise
    return delay(1000).then(function() {
        return getLinks(globalObj["two"]+".txt");
    });
});
...</code>

2. Add a Delay Method to the Promise Object:

A more elegant solution is to extend the Promise object with a delay method:

<code class="javascript">Promise.prototype.delay = function(t) {
    return this.then(function(val) {
        return delay(t, val);
    });
}</code>

Updated Code:

<code class="javascript">...
getLinks('links.txt').then(function(links){
    let all_links = (JSON.parse(links));
    globalObj=all_links;

    return getLinks(globalObj["one"]+".txt");

}).then(function(topic){
    writeToBody(topic);
    // return a promise using the delay method
    return Promise.resolve().delay(1000).then(function() {
        return getLinks(globalObj["two"]+".txt");
    });
});
...</code>

By using these techniques, you can introduce delays in promise chains without compromising the chaining behavior and avoiding runtime errors.

The above is the detailed content of Why does using setTimeout in a promise chain break the chain, and how can it be fixed?. For more information, please follow other related articles on the PHP Chinese website!