在 React Native 中使用 async/await 处理 API 调用
Handling API calls with async/await in React Native
我想为 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
}
}
但这似乎不起作用。我按下登录后,没有任何反应。谁能告诉我哪里做错了。
由于 login
是一个异步函数,并且您想等待 从 login
返回响应,您必须 await
也调用 login
:
let response = await login(this.state.email, this.state.password)
login
本身等待 fetch 调用完成。因此,您要等待 login
完成,您必须等待它。如果你不这样做,login
returns 一个承诺,正如你所观察到的,不是来自请求的响应对象。
我想为 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
}
}
但这似乎不起作用。我按下登录后,没有任何反应。谁能告诉我哪里做错了。
由于 login
是一个异步函数,并且您想等待 从 login
返回响应,您必须 await
也调用 login
:
let response = await login(this.state.email, this.state.password)
login
本身等待 fetch 调用完成。因此,您要等待 login
完成,您必须等待它。如果你不这样做,login
returns 一个承诺,正如你所观察到的,不是来自请求的响应对象。