在 ReactJS 中继续之前等待函数返回一个值答案

【问题标题】：Waiting until function returns a value before proceeding in ReactJS在 ReactJS 中继续之前等待函数返回一个值
【发布时间】：2018-10-06 08:14:27
【问题描述】：

我有两个功能：

getPrice(ticker)，进行 API 调用并返回股票价格
setStock(e) 应该设置 getPrice 返回后的状态

据我了解，如果我像在 setStock() 中那样在 getPrice() 之前将“await”放在函数调用之前，则代码不应继续执行，直到 getPrice() 返回。显然，我没有完全理解它，因为现在它返回未定义。我该如何解决这个问题？

此外，getPrice(ticker) 函数接受一个代码作为参数，这样我就可以将该函数用于不同的股票。这是进行 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]
      });
    }

【问题讨论】：

setTimeout 呢？

标签： javascript reactjs async-await

【解决方案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;
  }
}

【讨论】：

【解决方案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);
    });
};

或删除正文块并使用隐式返回。

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

【讨论】：