ホームページ >ウェブフロントエンド >jsチュートリアル >Promise チェーンで setTimeout を使用するとチェーンが壊れるのはなぜですか?また、それを修正するにはどうすればよいですか?

Promise チェーンで setTimeout を使用するとチェーンが壊れるのはなぜですか?また、それを修正するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-29 02:48:021078ブラウズ

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

Promise Chain での setTimeout の使用

Promise は非同期操作の順序付けを提供し、開発者がコールバック ベースのコードをあたかもそうであるかのように操作できるようにします。同期していました。ただし、Promise チェーン内の操作間に遅延を導入すると、課題が生じる可能性があります。

質問:

提供されたコード スニペットでは、setTimeout を使用して遅延が試行されていますが、結果はJSON 解析エラーです。これはなぜ発生しますか?また、どのように解決できますか?

<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>

回答:

この問題は、setTimeout が Promise を返さないために発生します。デフォルトでは、Promise チェーンから値を返すと、その値は解決された Promise オブジェクトにラップされます。ただし、setTimeout はタイマー ID を返すため、Promise チェーンが壊れ、戻り値は Promise として扱われません。

この問題を解決するには、次のアプローチを使用できます。

1. Promise チェーンの外側に遅延関数を作成します:

setTimeout を使用する代わりに、Promise で遅延をラップする遅延関数を定義します:

<code class="javascript">function delay(t, val) {
    return new Promise(resolve => setTimeout(resolve, t, val));
}</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. Promise オブジェクトに Delay メソッドを追加します:

より洗練された解決策は、遅延メソッドを使用して Promise オブジェクトを拡張することです:

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

これらの手法を使用すると、チェーンの動作を損なうことなく、実行時エラーを回避することなく、Promise チェーンに遅延を導入できます。

以上がPromise チェーンで setTimeout を使用するとチェーンが壊れるのはなぜですか?また、それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。