Возврат разрешенного значения обещания

Question

  const displayCharacters =  async () => { 
    if(filteredCharacters !== 'default'){
      const a = filteredCharacters.map(e => e.name);
      const options = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 'data' : a })
      };

      const b = await fetch("/image",options).then(res => res.json())
      return b; 

    }else{
      return "yikes";
    }
  }


  console.log(displayCharacters());

У меня есть этот запрос на выборку, но когда я регистрирую результаты, это то, что я вижу:

Promise {<resolved>: "yikes"}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: "yikes"

Я просто хочу взять обещание, а не всю эту вещь вокруг него. Как мне это сделать?

Answer 1

функция async возвращает обещание немедленно, без ожидания разрешения. Вместо этого вы можете использовать console.log внутри функции:

  const displayCharacters =  async () => { 
    if(filteredCharacters !== 'default'){
      const a = filteredCharacters.map(e => e.name);
      const options = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 'data' : a })
      };
      try {
        const b = await fetch("/image",options).then(res => res.json());
        console.log(b);

        //the better practice is however, to do like:
        const b = await fetch("/image",options)
        const result = await b.json(); 
        console.log(result );
      }
      catch(err) {
         console.log(err);
      }

    }else{
      console.log("yikes");
    }
  }


displayCharacters();

Answer 2

Лучший способ использования fetch, который я знаю, заключается в следующем:

const displayCharacters =  async () => { 
  if(filteredCharacters !== 'default'){
    const a = filteredCharacters.map(e => e.name);
    const options = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ 'data' : a })
    };

    const b = await fetch("/image",options)
      .then(res => {
        // Handle API Errors
        if (!res.ok) {
          throw Error(res.statusText);
        }
        // Return if no errors
        return res.json();
      })
      // this is the data you want
      .then(data => data)
      // it will only reject on network failure or if anything prevented the request from completing
      .catch(error => {
        console.log(error.message)
      });

    return b; 

  }else{
    return "yikes";
  }
}

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