方法returns 早于Axios returns 在reactjs 中获取数据

Question

我正在使用 axios.post 方法从服务器获取数据，但 return 早。我使用了异步和等待，但数据未更新

apiService.js

export const  getAppAuthUser = async (page, authorizedType) => {

    await axios.post(APIURL.apiURL, JSON.stringify({
        page: page,
        authorized: authorizedType
    }), {
        headers: {

            'Content-Type': 'application/json'
        }
    }).then(res => {
        console.log(res);
        return res.data;
    }).catch(err => {
        console.log(err);
    });
}

component.js

import * as Users from '../api/apiService';
class User extends Component {
    sortedInfo = {};
    componentDidMount() {
        this.data=Users.getAppAuthUser(1,true);
        console.log(this.data);
    }
}

当我安慰它时return承诺{}

请帮忙

Answer 1

这就是 async 函数的作用：它们 return 承诺。 async/await 的存在是为了使使用承诺的语法更容易，但它不会改变涉及承诺的事实。要获取 promise 中的值，您需要使用 promise 的 .then 方法，或者将您的代码放入异步函数中并等待其结果。

您的 getAppAuthUser 函数也有问题，您没有 returning 任何东西，因此承诺将解析为未定义。当您将 .then 样式与 async/await 样式混合使用时，会更容易出现此类问题。我强烈建议只选择一种样式并始终如一地使用它。

export const getAppAuthUser = async (page, authorizedType) => {
  try {
    const res = await axios.post(APIURL.apiURL, JSON.stringify({
      page: page,
      authorized: authorizedType
    }), {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    console.log(res);
    return res.data;
  } catch (err) {
    console.log(err);
  }
}

import * as Users from '../api/apiService';
class User extends Component {
    sortedInfo = {};
    async componentDidMount() {
        this.data = await Users.getAppAuthUser(1,true);
        console.log(this.data);
    }
}

Answer 2

JavaScript 是异步的，我们不能像这样使用 this.data=Users.getAppAuthUser(1,true) 如果你想像这样使用，那么使用 async-await 这样 async componentDidMount() { this.data= await Users.getAppAuthUser(1,true); console.log(this.data); }

或者你可以像这样使用 promise Users.getAppAuthUser(1,true).then(data=>{ console.log(data); })

方法returns 早于Axios returns 在reactjs 中获取数据

Method returns early before Axios returns fetched data in reactjs

reactjs

axios

next.js