react.js 中的 javascript 异步

Question

在一个java脚本文件中，我有这个代码：

import axios from "axios";
let baseUrl = "http://localhost:8080";

export async function getData(parameter) {
    let url=baseUrl.concat(parameter);
    axios.get(url)
        .then(function (response) {
            console.log(response.data);
            return response.data;
        })
        .catch(function (error) {
            console.log("accessing " + url+ " got error : " +error);
        });
}

在我的 User 类中，我写了这个：

class Users extends React.Component{

    state={
        userList:''
    };

    componentWillMount() {
        this.setState(
            (prevState,props)=>{
                return {userList:await StaticData.getData("/users")};
            }
        );
        console.log(this.state.userList);
    }

    render() {
        return(
            <div>
                {this.state.userList}
            </div>
        );
    }
}
export default Users;

CodeSandBoxing 无法使用，因为我使用的是本地主机。

首先，这给了我一个错误说 -只等待异步函数，它已经是，那么错误是什么

其次，如果我删除等待，为什么没有呈现新的 userData？

Answer 1

很抱歉，我们有很多错误和误解，我们需要在此处更新以解决此问题。

首先，函数中的await不起作用，因为您没有将使用await关键字的函数标记为async函数。 所以你应该这样做

    componentWillMount() {
        this.setState(
            async (prevState,props)=>{
                return {userList:await StaticData.getData("/users")};
            }
        );
        console.log(this.state.userList);
    }

但这解决了关于await的错误，它不会解决您原来的问题，这就是为什么不呈现数据......？

您需要知道使用 promise 调用http的异步逻辑与从上到下、从左到右执行命令的普通同步代码不同。

当您使用 promise 时，您会告诉您的程序这里将以异步方式发生某些事情，这意味着我们不知道什么时候会返回结果。

这是一个例子

console.log('a');
axios.get('some url...').then( () => console.log('b') );
console.log('c');

这三个命令的结果是

a
c
b

现在看看你的问题，首先你必须在你的函数中返回 axios 承诺，它不需要是异步的，因为它没有在其中使用关键字await

export function getData(parameter) {
    let url=baseUrl.concat(parameter);
    return axios.get(url)
        .then(function (response) {
            console.log(response.data);
            return response.data;
        })
        .catch(function (error) {
            console.log("accessing " + url+ " got error : " +error);
        });
}

最后，如果response.data的返回值是一个数组，则您无法像在 React 中那样渲染它。 而是在jsx使用map函数，例如

<div>
 { this.state.userList.map(user => <div key={user.id}> { user.name } </div>) }
</div>

我建议您将获取数据逻辑放在 componentDidMount 而不是

Answer 2

首先，您应该返回承诺： return axios.get(url) ....

首先，这给了我一个错误说 - 只等待异步函数，它已经是，那么错误是什么

您正在使用箭头函数，因此它必须具有异步标识符：

componentWillMount() {
    this.setState(
        async (prevState,props)=>{
            return {userList:await StaticData.getData("/users")};
        }
    );
    console.log(this.state.userList);
}

最后，获取数据的最佳位置是componentDidMount 。

Answer 3

你的代码中有很多概念上的缺陷。

1. 组件将安装已弃用。 使用 componentDidMount() 代替。
2. 在 getData 函数中使用 async await 或使用 then 和 catch。

export async function getData(parameter) {
    let url= baseUrl.concat(parameter);
    try{
        const response = await axios.get(url);
    } catch (err) {
        console.log("accessing " + url+ " got error : " +err);
    }
}

要使用 Promise 然后用 catch 替换你的代码

export function getData(parameter) {
let url=baseUrl.concat(parameter);
return axios.get(url)
    .then(function (response) {
        console.log(response.data);
        return response.data;
    })
    .catch(function (error) {
        console.log("accessing " + url+ " got error : " +error);
    });

}

此外，由于您使用的是箭头函数，因此 await 只能在异步函数内。 所以

this.setState(
       async (prevState,props)=>{
            return {userList:await StaticData.getData("/users")};
        }
    );