Ожидание, пока функция вернет значение, прежде чем продолжить в ReactJS

Question

У меня есть две функции:

• getPrice (тикер), который выполняет вызов API и возвращает цену акции
• setStock (e), которая должна устанавливать состояние после возврата getPrice

Как я понял, если я поставлю "await" перед вызовом функции, как я делаю в setStock () перед getPrice (), код не должен продолжать выполняться до тех пор, пока не вернется getPrice ().Очевидно, я не до конца понял, потому что сейчас он возвращает неопределенное значение.Как это исправить?

Кроме того, функция getPrice (тикер) принимает тикер в качестве аргумента, чтобы я мог использовать эту функцию для разных акций.Это хороший способ делать вызовы API?

    getPrice = (ticker) => {
      axios.get(`https://api.iextrading.com/1.0/stock/${ticker}/price`)
       .then((res) => {
         const price = res.data;
         return price;
       }).catch((err) => {
           console.log(err);
         });

    }

    setStock = async (e) => {
      e.preventDefault();
      const ticker = e.target.elements.tickers.value;
      const quantity = e.target.elements.tickers_quant.value;
      const price = await this.getPrice(ticker);
      const stock = {
        ticker,
        price,
        quantity
      }
      this.setState({
        stocks: [...this.state.stocks,stock]
      });
    }

Answer 1

Вы специально ничего не возвращаете из своей функции getPrice.Вот почему он возвращает undefined.Эту функцию можно изменить, как показано ниже, чтобы она работала.

getPrice = async (ticker) => {
  try {
    const res = await axios.get(`https://api.iextrading.com/1.0/stock/${ticker}/price`);
    const price = res.data;
    return price;
  } catch (err) {
    console.log(err);
    return null;
  }
}

Answer 2

Вы не возвращаете обещание в вашем getPrice методе, вы просто вызываете его.Вы используете функцию стрелки, и у вас есть блок тела, который требует явного возврата.Итак, используйте это:

getPrice = ticker => {
  return axios
    .get(`https://api.iextrading.com/1.0/stock/${ticker}/price`)
    .then(res => {
      const price = res.data;
      return price;
    })
    .catch(err => {
      console.log(err);
    });
};

или отбросьте блок body и используйте неявный возврат.

getPrice = ticker =>
  axios
    .get(`https://api.iextrading.com/1.0/stock/${ticker}/price`)
    .then(res => {
      const price = res.data;
      return price;
    })
    .catch(err => {
      console.log(err);
    });