Использование JavaScript Fetch возвращает ожидающее обещание

Question

Я получаю текст из Dictionary API и не могу понять, почему мой код возвращает ожидающее обещание. Однако регистрация значения возвращает намеченный текст. Вот мой код,

const getWord = (difficulty) => {

    const fetchParameters = api + "?difficulty=" + difficulty

    let outputWord = fetchWord(fetchParameters).then(value => {
        console.log(value) // ->Logs intended text
        return value
    })

    return outputWord // -> Returns Pending Promise
}


async function fetchWord(fetchParams) {
        const response = await fetch(fetchParams)
        const text = await response.text()
        return text.split("\n")[1]
}

test = getWord(5)

console.log(test) // Results in Pending Promise

Answer 1

Поскольку async функции возвращают Promise, вам нужно дождаться разрешения этого обещания, прежде чем вы сможете использовать значение

Одно из решений - обернуть ваш код в асинхронный IIFE

(async () => {
  const getWord = (difficulty) => {

    const fetchParameters = api + "?difficulty=" + difficulty

    let outputWord = fetchWord(fetchParameters).then(value => {
      console.log(value) // ->Logs intended text
      return value
    })

    return outputWord // -> Returns Pending Promise
  }


  async function fetchWord(fetchParams) {
    const response = await fetch(fetchParams);
    const text = await response.text();
    return text.split("\n")[1]
  }

  let test = await getWord(5)
  console.log(test) // Results in correct output
})();

Но обратите внимание: test все еще не будет значением, доступным за пределами этого IIFE

Другое решение заключается в использовании Promise.then

const getWord = (difficulty) => {

  const fetchParameters = api + "?difficulty=" + difficulty

  let outputWord = fetchWord(fetchParameters).then(value => {
    console.log(value) // ->Logs intended text
    return value
  })

  return outputWord // -> Returns Pending Promise
}


async function fetchWord(fetchParams) {
  const response = await fetch(fetchParams);
  const text = await response.text();
  return text.split("\n")[1]
}

getWord(5).then(test =>
  console.log(test)
);

Но, опять же, значениеtest по-прежнему доступен только в последнем .then обратном вызове

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

Мне кажется, вы пытаетесь использовать промежуточную асинхронную функцию для асинхронности короткого замыкания - что вы не можете - приведенный выше код более сложный способделает

const getWord = async (difficulty) => {

  const fetchParameters = api + "?difficulty=" + difficulty;

  const response = await fetch(fetchParameters);
  const text = await response.text();
  return text.split("\n")[1];
};

getWord(5).then(test =>
  console.log(test)
);

Answer 2

Потому что вы используете асинхронную функцию внутри базовой функции. В вашем случае лучше использовать:

const getWord = word => { // Created function that will be executed if promise resolve.
  console.log(word);
}

const getOutputWord = difficulty => {

  const fetchParameters = api + "?difficulty=" + difficulty;

  let outputWord = fetchWord(fetchParameters).then(value => {
    getWord(value); // pass value of promis
  });
}


async function fetchWord(fetchParams) {
  const response = await fetch(fetchParams)
  const text = await response.text()
  return text.split("\n")[1]
}

getOutputWord(3) // will execute getWord and return result in console