在 React Native 中使用 async/await 处理 API 调用

Posted 2023-03-07

【中文标题】在 React Native 中使用 async/await 处理 API 调用

【英文标题】：Handling API calls with async/await in React Native

【发布时间】：2019-01-05 11:15:12

【问题描述】：

我想要一个单独的文件用于 API 调用 -

APIHandler.js

const loginAPI = 'https://..../login';

export async function login(emailAddress, pass) 
    const reqOptions = 
        method: 'POST',
        headers: 
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        ,
        body: JSON.stringify(

            email: emailAddress,
            password: pass,

        )
    ;

    let response = await fetch(loginAPI, reqOptions);
    return response;

现在在我的login.js，我想这样做：

onLoginPressed = async () => 
    let response = login(this.state.email, this.state.password)

    if (response.status >= 200 && response.status < 300) 
       //Login success
     else 
        //Login error
    

但这似乎不起作用。按登录后，没有任何反应。谁能告诉我哪里做错了。

【参考方案1】：

由于login 是一个异步函数，并且您想等待从login 返回的响应，您也必须await 调用login：

let response = await login(this.state.email, this.state.password)

login 本身等待 fetch 调用完成。所以你要等待login 完成，你必须等待它。如果您不这样做，login 会返回一个承诺，正如您所观察到的，它不是来自请求的响应对象。