Question

我正在尝试从终端获取数据以进行响应，但是我不知道我该如何等待被调用的函数返回然后将光标传递到下一行。

FetchData.js

// ...
componentDidMount () {
        const url = 'http...';
        const options = {
            headers: {'Content-Type': 'application/json'},
            method: 'GET'
        }
        const data = fetchDataFromUrl(url, options);

        this.setState({ item: data },
            () => this.updateItem())
}
console.log(this.state.item)
// ...

fetchData.js

export const fetchDataFromUrl = (url, options) => {
    const repsonse = fetch(url, options)
    .then(res  => res.json())
    .then(data => { 
        return data 
    })
}

这确实返回了data，但是在console.log（）中，我变得未定义，经过一段时间（即在其他函数中），我可以看到data的内容。我如何等待fetchDataFromUrl函数在状态更新之前获取数据。我用了 const data = async() => fetchDataFromUrl(url, options);，但无济于事。

Answer 1

您可以简单地使用，异步并等待您的需求

componentDidMount () {
      this.getData()
}

getData= async()=>{
const url = 'http...';
        const options = {
            headers: {'Content-Type': 'application/json'},
            method: 'GET'
        }
        const data = await fetchDataFromUrl(url, options);

        this.setState({ item: data },
            () => this.updateItem())
}

用户获取功能也应该是异步功能。

export const fetchDataFromUrl = async(url, options) => {
    const repsonse = await fetch(url, options);
      return repsonse; //Modify you response
}

如何等待JavaScript函数完成反应？

1 个答案: