Question

我使用jsonplaceholder URL测试fetch 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());
});

我认为问题是因为异步/同步方法？

Answer 1

我认为这个问题变成了异步/同步方法吗？

是。您（大部分）已正确使用原始fetch()承诺，但text() 也会返回承诺。所以：

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);
}

获取返回Promise状态：pending

1 个答案: