web-dev-qa-db-ja.com

フェッチリターンプロミス状態：保留

Jsonplaceholder URLを使用してフェッチAPIをテストしましたが、関数が「Promise State：Pending」を返し、理由がわかりません。

function getUsers(url) {
  return fetch(url)
}

const users = getUsers(`https://jsonplaceholder.typicode.com/users`);

users.then(response => {
  console.log(response.text());
});

問題は非同期/同期メソッドが原因であると思いますか？

javascriptjsonecmascript-6fetch-api
9
Stéphane R.

問題は非同期/同期メソッドになると思いますか？

はい。元のfetch() promiseを（ほとんど）正しく消費しましたが、 text()also約束を返します。そう：

_users.then(response => response.text()) // 1
     .then(json => {                    // 2
          console.log(json);
     })
     .catch(error => {                  // 3
          // handle error
     });
_
_fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.text())      // 1
     .then(json => {                    // 2
          log("typeof json: " + typeof json);
          log(json);
     })
     .catch(error => {                  // 3
          // handle error
     });

function log(msg) {
  var p = document.createElement("pre");
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
}_

上記の＃1では、本文テキストを読み取るプロセスを開始し、fetch()からプロミスを返すことにより、text()プロミスの解決に成功しました。

上記の＃2では、結果のテキスト（JSONを含む文字列）を使用して、text()のプロミスの解決に成功します。

上記の＃3では、元のfetch()またはtext()のいずれかを使用して、エラーを処理します。

約束の拒否は必ず処理してください。そうしないと、それらは未処理の例外とは異なります。それらはコンソールに報告され、一部の環境（最近のバージョンのNodeなど）は未処理の拒否で終了します。

JSONをリクエストしているので、json()ではなくtext()を使用して、読み取りと解析の両方を行うことができます。

_users.then(response => response.json())
     .then(arrayOfUsers => {
          console.log(arrayOfUsers);
     })
     .catch(error => {
          // handle error
     });
_
_fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
     .then(arrayOfUsers => {
          log("typeof arrayOfUsers: " + typeof arrayOfUsers);
          log("arrayOfUsers.length: " + arrayOfUsers.length);
     })
     .catch(error => {                  // 3
          // handle error
     });

function log(msg) {
  var p = document.createElement("pre");
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
}_
8
T.J. Crowder