Fetch возвращает обещание вместо фактических данных даже после использования 'then'

Question

Я делаю простой вызов извлечения в моем компоненте, который выглядит следующим образом

    var x = fetch(SOME_URL, SOME_POST_DATA)
             .then((response) => response.json())
             .then((responseJSON) => {return responseJSON});

    console.log(x);

Вызов выполняется успешно, но консоль печатает обещание вместо данных. Что мне здесь не хватает?

Answer 1

То, как работают обещания, означает, что вам нужно responseJSON внутри обработчика для then(), Из-за асинхронной природы запросов внешний код будет возвращен к моменту разрешения обещания.

Поначалу может быть трудно разобраться, но это во многом похоже на "традиционный" AJAX-запрос - вы обрабатываете ответ в обратном вызове.

Чтобы взять ваш пример:

var x = fetch(SOME_URL, SOME_POST_DATA)
    .then((response) => response.json())
    .then((responseJSON) => {
       // do stuff with responseJSON here...
       console.log(responseJSON);
    });

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise