Как получить значение json, используя await вместо просто .then - PullRequest
Новая
       40

Как получить значение json, используя await вместо просто .then

0 голосов
/ 09 июля 2020

Это работает 

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

, но получаю undefined

Ответы [ 2 ]

4 голосов
/ 09 июля 2020

result.json() вернет Promise, который вам нужен для await.

В настоящее время вы конвертируете Promise объект, возвращаемый result.json(), в строку, и это то, что регистрируется в console. 

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

Изменить:

как получить userId

Вы получаете undefined, потому что вы конвертируете объект, возвращаемый await result.json() в строку, и когда любой объект преобразуется в строку, вы получаете что-то вроде "[object Object]".

Просто не преобразовывайте объект, возвращаемый await result.json(), в строку и просто обращайтесь к свойству 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();
3 голосов
/ 09 июля 2020

Если вам нужно два вызова then в первой версии, тогда ожидайте, что вам понадобятся два await во второй версии. Метод json() возвращает обещание.

Итак, измените: 

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

To: 

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