[解決済み] .json()はなぜプロミスを返すのですか?
質問
をいじっていたのですが
fetch()
api は、最近、少し風変わりなことに気づきました。
let url = "http://jsonplaceholder.typicode.com/posts/6";
let iterator = fetch(url);
iterator
.then(response => {
return {
data: response.json(),
status: response.status
}
})
.then(post => document.write(post.data));
;
post.data
が返されます。
Promise
オブジェクトを作成します。
http://jsbin.com/wofulo/2/edit?js,output
しかし、もしそれが次のように書かれていたら。
let url = "http://jsonplaceholder.typicode.com/posts/6";
let iterator = fetch(url);
iterator
.then(response => response.json())
.then(post => document.write(post.title));
;
post
以下は標準的なものです。
Object
で、title属性にアクセスすることができます。
http://jsbin.com/wofulo/edit?js,output
そこで質問なのですが、なぜ
response.json
はオブジェクトリテラルでプロミスを返しますが、返されただけの場合は値を返しますか?
どのように解決するのですか?
<ブロッククオート
なぜ
response.json
はプロミスを返すのですか?
を受け取るからです。
response
は、すべてのヘッダが到着した時点で 呼び出し
.json()
は、まだ読み込まれていない http レスポンスのボディに対する別のプロミスを取得します。また
JavaScript フェッチ API のレスポンスオブジェクトは、なぜプロミスなのですか?
.
からプロミスを返すと、なぜか値が返ってくる。
then
ハンドラ
なぜなら それが約束事 . コールバックからプロミスを返して採用される機能は、その最も関連性の高い機能であり、ネストせずに連鎖させることができるようになります。
を使用することができます。
fetch(url).then(response =>
response.json().then(data => ({
data: data,
status: response.status
})
).then(res => {
console.log(res.status, res.data.title)
}));
またはその他の のアプローチで、.then() チェーンで以前のプロミス結果にアクセスすることができます。 を使用して、json 本体を待機させた後にレスポンスのステータスを取得します。
関連
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] なぜ ++[[]][+[] +[+[]] は "10" という文字列を返すのでしょうか?
-
[解決済み] フェッチする JSONデータをPOSTする
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
Vueの要素ツリーコントロールに破線を追加する説明
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
vueにおけるv-forループオブジェクトのプロパティ
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。