[解決済み] プロミスチェーンでsetTimeoutを使用する
2022-03-08 23:35:13
質問
最初のリクエストでリンクのセットを取得し、次のリクエストで最初のリンクのコンテンツを取得します。しかし、私は次のプロミスオブジェクトを返す前に遅延を作りたいので、私はそれにsetTimeoutを使用します。しかし、それは私に次のJSONエラーを与える(
without setTimeout() it works just fine
)
SyntaxError: JSON.parse: 予期しない文字が1行目1列目にあります。 JSONデータ
なぜ失敗するのか知りたいのですが?
let globalObj={};
function getLinks(url){
return new Promise(function(resolve,reject){
let http = new XMLHttpRequest();
http.onreadystatechange = function(){
if(http.readyState == 4){
if(http.status == 200){
resolve(http.response);
}else{
reject(new Error());
}
}
}
http.open("GET",url,true);
http.send();
});
}
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);
});
解決方法は?
プロミスの連鎖を維持するために
setTimeout()
からプロミスを返すわけではないので、今までのように
.then()
ハンドラから返しているのです。
setTimeout()
のコールバックは、何の役にも立ちません。
代わりに、次のようなシンプルで小さな遅延関数を作ることができます。
function delay(t, v) {
return new Promise(function(resolve) {
setTimeout(resolve.bind(null, v), t)
});
}
そして、こんな風に使います。
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");
});
});
ここでは
.then()
ハンドラであるため、適切に連結されています。
また、Promiseオブジェクトにdelayメソッドを追加し、直接
.delay(x)
というメソッドをプロミスに追加します。
function delay(t, v) {
return new Promise(function(resolve) {
setTimeout(resolve.bind(null, v), t)
});
}
Promise.prototype.delay = function(t) {
return this.then(function(v) {
return delay(t, v);
});
}
Promise.resolve("hello").delay(500).then(function(v) {
console.log(v);
});
または
ブルーバードプロミスライブラリ
これは、すでに
.delay()
メソッドが組み込まれています。
関連
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] Javascriptで文字列の最後の文字を切り取るにはどうしたらいいですか?
-
[解決済み] forEachループでasync/awaitを使用する
-
[解決済み] JavaScriptでドロップダウンリストの選択値を取得する
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] setTimeout(fn, 0)が役に立つことがあるのはなぜですか?
-
[解決済み] setTimeout()コールバックにパラメータを渡すにはどうすればよいですか?
-
[解決済み] setTimeoutかsetIntervalか?
-
[解決済み] .then()チェーンで以前のプロミス結果にアクセスするにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】パッシブイベントリスナー内部でpreventDefaultができない
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み】XMLHttpRequestモジュールが定義されていない/見つからない
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】リソースはドキュメントと解釈されるが、MIMEタイプはapplication/zipで転送される
-
[解決済み】Syntax error: JavaScriptの不正なreturnステートメント
-
[解決済み】module.exports "モジュールが定義されていません"
-
[解決済み】JavaScript版sleep()とは?)
-
[解決済み] .then()チェーンで以前のプロミス結果にアクセスするにはどうすればよいですか?