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

Question

我想为 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
    }
}

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

Answer 1

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

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

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

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

Handling API calls with async/await in React Native

react-native

async-await

ecmascript-2017