Question

我想使用异步并等待道具。

所以基本上我有一个onRefresh函数，当用户向下滚动时会刷新。

在这里，我要在我的reducer成功更新数据后将状态更改为false

onRefresh = () => {
        this.setState({isFetching: true}, () => {
            refreshData = async () => {
            await this.props.indianCurrency()
            await this.props.exchangeToDisplay(this.coinURL, true)
            await  this.setState({isFetching: false})
            }
        })

    }

在等待this.props.indianCurrency()的操作中，我添加了console.log语句以查看它是否正在执行。

这是我对indianCurrency的操作

export const indianCurrency = () => {
  console.log("inside Indian currency")
  return function (dispatch) {
    dispatch({type: CURRENCY_FETCHING})
    axios.get(CurrencyRateLinkINR).then((response) => {
      return (
        dispatch({
          type: CURRENCY_INR,
          payload: response.data
        })
      )
    }).catch((error) => {
      return (
        dispatch({
          type: CURRENCY_ERROR,
          payload: error.data
        })
      )
    })
  }
}

对于exchangeToDisplay，我的操作如下所示

export const exchangeToDisplay = (exchangURL, random) => {
    console.log(random)
    console.log("on Refresh check as well")
    return function (dispatch) {
            if (random == undefined) {
               dispatch({type: EXCHANGE_CURRENCY_FETCHING })
             }
            let koinexApi = axios.get(koinex)
            let coinDeltaApi = axios.get(coinDelta)
            let multipleExchangeDataApi = axios.get(multipleExchangeData + exchangURL + "-usd") 
            Promise.all([koinexApi, coinDeltaApi , multipleExchangeDataApi]).then(function(values) {
                return(
                    dispatch({
                        type: EXCHANGE_CURRENCY_FETCH_SUCCESS,
                        payload: values
                    })
                 )   
            }).catch((error) => {
                return (
                    dispatch({
                        type: EXCHANGE_CURRENCY_FETCH_ERROR,
                        payload: error
                    })
                )
             })
    }
}

令我惊讶的是，那里什么都没有登出。所以我有理由相信我在这里没有正确使用异步/等待？那么有人可以指导我如何使用异步并正确等待吗？

注意：我故意不粘贴reducer code，因为我认为该问题恰好在我的异步/等待状态中，因为即使在运行中，它也没有运行export const indianCurrency = () => {如果需要，请让我知道，然后将其粘贴。

Answer 1

当前代码的问题是您没有返回承诺。

因此，如果您更改

...
axios.get(...)

到

...
return axios.get(...)

然后您的顶层等待者（例如await this.props.indianCurrency()）实际上会等待以兑现诺言。

另一种选择是使获取代码异步（尽管您仍然需要返回一个值）：

export const indianCurrency = async () => {
  ...
  const results = await axios.get(...)
  return results
}

不用说，Promise.all(...)也是如此-return Promise.all(...)或使其异步/等待。

此外，正如@NoobieSatan在评论中指出的那样，您的refreshData代码似乎可疑。为什么要在状态回调中定义函数？也许您想在外部定义它并调用内部它？

refreshData = async () => {
    await this.props.indianCurrency()
    await this.props.exchangeToDisplay(this.coinURL, true)
    this.setState({isFetching: false}) // you don't need await here
}

onRefresh = () => {
    this.setState({isFetching: true}, refreshData)
}

但是再说一遍，这不是您使用setState回调的方式或原因。如果您打算显示加载标志，然后执行一些后台抓取操作，则应该在refreshData

之后调用setState

onRefresh = () => {
    this.setState({isFetching: true})
    refreshData()
}

refreshData完成后（您仍然需要返回保证异步/等待工作的承诺），它将更新状态，React将正确地重新渲染组件。而且您无需等待setState。

对道具使用Aysnc / await

1 个答案: