Question

我是React Js的新手，正在尝试使用fetch进行API调用。

我已经编写了一个用于API调用的通用异步函数，用于将请求发送到API端点。该函数正在另一个类的函数中调用，该函数应解析结果并将其值返回给父函数调用。

这是我的实用工具类，其中包含一个调用端点的函数：

export default class RestUtil {
  getModel = async (model) => {
    let url = 'http://api.xyz.com/' + model;
    const apiCall = await fetch(url,
        {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer xyz'
            }
        });
    return  apiCall.json();
 }
}

下面是引起问题的我的React组件：

export default class MyComponent extends React.Component {
   componentDidMount() {
     this.populateUsersDropDown();
   }

   populateUsersDropDown() {
     let users = this.fetchUsers();
     // Here the `users` is undefined. <-------- Issue

     //Do some other work with users

     /*Populate users in 
                 the dropdown*/
   }

   fetchUsers() {
     new RestUtil()
         .getModel('users')
         .then(data => {
             /* Do some other work with data */
             return data;
         })
   }

}

现在，我希望populateUsersDropDown（）等待fetchUsers（）完成then部分，然后返回数据并继续。但是我在用户变量中收到undefined。在我的then部分中，我可以看到数据。

在解决这个问题上需要帮助吗？

Answer 1

您的fetchUsers方法不返回任何内容。

    async fetchUsers() {
     const users = await new RestUtil().getModel('users');

     return users;
   }

这应该有效

如何在非异步函数中调用异步函数

1 个答案: