React Native在执行其他API调用之前等待一个API调用完成

Question

我正在用react native编写一个应用程序，需要调用API来接收一个承载令牌，它将用于所有其他API调用，但我很难确保在进行任何其他调用之前获得令牌的调用完成。

我有一个基本的APIHelper类，它将包含所有API调用应用程序需要做的包装器函数，这里是它的简化版本:

export class APIHelper {
constructor(baseURL) {
this.baseURL = baseURL;
this.token = null;
}
setToken(token) {
this.token = token;
}
getToken(username, password) {
var url = this.baseURL + `/token/${username}/${password}`;
fetch(url, {
method: "GET",
header: {
"Content-Type": "application/json"
}).then(response => response.json())
.then((data) => {
this.setToken(data["access_token"]);
});
}
getRequest(endpoint) {
fetch(this.baseUrl + endpoint, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + this.token
}
}).then(response => response.json())
.then((data) => {
console.log(data);
});
}
}

这是我的App.js的简化版本:

var apiHelper = new APIHelper("URLGoesHere");
class StarterApp extends React.Component {
render() {
apiHelper.getToken("UsernameGoesHere", "PasswordGoesHere");
var users = apiHelper.getRequest("/users");
console.log(users);
return (
//App Content Here
);
}
}

我尝试了许多不同的事情:使API调用异步，在getRequest函数中建立检查，直到token不是null，但这似乎只是挂起，将调用移动到应用程序的构造函数。我想做什么是可能的?或者每次我想进行API调用时都需要调用来获取令牌?

也:我知道这不是一个特别安全的API，这是一个学校项目的临时系统，请不要提供反馈。

Answer 1

如果你从gettrequest, getToken返回的fetch调用是承诺，你可以确保调用getToken在gettrequest使用await之前完成。也可以按照Chris G的建议运行componentDidMount中的代码，例如

export class APIHelper {
constructor(baseURL) {
this.baseURL = baseURL;
this.token = null;
}
setToken(token) {
this.token = token;
}
getToken(username, password) {
var url = this.baseURL + `/token/${username}/${password}`;
return fetch(url, {
method: "GET",
header: {
"Content-Type": "application/json"
}).then(response => response.json())
.then((data) => {
this.setToken(data["access_token"]);
});
}
getRequest(endpoint) {
return fetch(this.baseUrl + endpoint, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + this.token
}
}).then(response => response.json())
.then((data) => {
console.log(data);
});
}
}
var apiHelper = new APIHelper("URLGoesHere");
class StarterApp extends React.Component {
async componentDidMount() {
try {
await apiHelper.getToken("UsernameGoesHere", "PasswordGoesHere");
await var users = apiHelper.getRequest("/users");
console.log(users);
} catch (e) {
console.log(e)
}
}
render() {
return (
//App Content Here
);
}
}