Question

请参见下面的代码：

class WhiteBoard extends React.Component {
constructor(props) {
    super(props);
    this.userService = new UserService();
    this.state = {user: []};
}

userLogin = (user) => {
    console.log("inside whiteborad user login");

    let loginuser = {
        username: user.username,
        password: user.password
    };
    console.log(loginuser);

    this.userService.getLoggedInUser(loginuser)
        .then( data => {
            console.log("adsad"+mydata);
            this.setState({user: mydata})
        });

    console.log(this.state.user)
}

UserService在下面：

class UserService {

async getLoggedInUser(user){
    console.log("inside user service");
    console.log(user);
    const USER_API_URL = API_URL + "/api/login";
    fetch(USER_API_URL, {
        headers : {
            'Content-Type' : 'application/json'
        },
        method : "POST",
        body : JSON.stringify(user)
    }).then(response => response.clone().json()).then(data => {
        console.log(data);
        return data;
    });
}
}

export default UserService;

我在控制台中得到以下输出：

inside whiteborad user login
WhiteBoard.js:29 {username: "bird", password: "bird"}
UserService.js:6 inside user service
UserService.js:7 {username: "bird", password: "bird"}
WhiteBoard.js:37 []
WhiteBoard.js:33 adsadundefined
UserService.js:16 {id: 100, username: "bird", password: "bird", firstName: "Alice", lastName: "Kathie", …}

问题是，我在userService.getLoggedInUser（）。then（）部分调用的then方法中获取了未定义的数据。因此，setState无法正常工作并返回null。数据在userService方法中运行良好。但是，在userLogin方法中，当我调用userService时，方法就不再等待从userService函数获得响应了。我该怎么解决？

Answer 1

问题是您使用了一个Promise，但没有return，因此调用方没有与此连接，而是您的then链接到async函数的默认Promise。正常的解决方法是修复return fetch(...)，但是由于您正在使用async函数，因此您可以采用另一种方法。

要解决此问题，请利用async并使用await：

class UserService {
  async getLoggedInUser(user){
    console.log("inside user service");
    console.log(user);
    const USER_API_URL = API_URL + "/api/login";

    let response = await fetch(USER_API_URL, {
        headers : {
            'Content-Type' : 'application/json'
        },
        method : "POST",
        body : JSON.stringify(user)
    });

    let data = await response.clone().json();

    console.log(data);
    return data;
  }
}

现在它已正确排序。

在将诺言与then链接使用时，最常见的问题之一是丢球而忘了明确return要先进行等待的诺言。

then（）方法在实际返回数据之前执行

1 个答案: