如何使用 await 而不是 .then 获取我的 json 值

Question

这个有效

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log('4. userId = ' + json.userId))

给我：

4. userId = 1

但是当我尝试使用 await

{
  async function doFetch() {
    const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    console.log('8. await: ' + String(result.json()));
  } doFetch();
}

我得到了承诺而不是输出

8. await: [object Promise]

如何获得 JSON 值？

更新

感谢您的回答：

console.log('8. await: ' + String(await result.json()));

不过我应该更清楚了，如何获取userId？我试过了

console.log('8. await: ' + String(await result.json().userId));

但我没有定义

Answer 1

当您在第一个版本中需要两个 then 调用时，则期望在第二个版本中需要两个 await。 json() 方法 returns 承诺。

所以改变：

console.log('8. await: ' + String(result.json()));

收件人：

console.log('8. await: ' + String(await result.json()));

要获得属性，照常进行即可，但请确保您已先等待该对象。所以先关闭括号：

(async function () {
    const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    console.log('8. await: ' + (await result.json()).userId);
})();

如果您需要的不仅仅是那个属性，那么只需先将整个对象放入一个变量中，然后再使用该变量：

(async function () {
    const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const obj = await result.json();
    console.log('userId = ' + obj.userId);
})();

Answer 2

result.json() 会 return 一个 Promise 你需要 await.

目前，您正在将由 result.json() 编辑的 Promise 对象 return 转换为字符串，这就是在控制台上记录的内容。

const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await result.json();
console.log('8. await: ' + data);

编辑：

how to get the userId

你得到 undefined 是因为你正在将 await result.json() 编辑的对象 return 转换为字符串，当任何对象转换为字符串时，你会得到类似 "[object Object]".

只是不要将 await result.json() 编辑的对象 return 转换为字符串并简单地访问 userId 属性

console.log('8. await: ' + (await result.json()).userId);

请参阅以下代码段

async function fetchData() { 
  const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await result.json();
  console.log(String(data));        // what you are doing
  console.log(data);                // what you should do
}

fetchData();

如何使用 await 而不是 .then 获取我的 json 值

How to get at my json value using await instead of just .then

javascript

promise

async-await

async.js

更新

编辑：