Javascript 在类方法React Native中包装获取API
为了使React本机代码更加结构化,在我的最新项目中,我决定创建一个包含所有获取请求的类。课程结构如下所示:Javascript 在类方法React Native中包装获取API,javascript,reactjs,oop,react-native,Javascript,Reactjs,Oop,React Native,为了使React本机代码更加结构化,在我的最新项目中,我决定创建一个包含所有获取请求的类。课程结构如下所示: import { AsyncStorage } from 'react-native'; // const API_URL = 'http://localhost:5500'; const API_URL = 'https://trail-api.herokuapp.com'; export default class Backend { static logIn(usernam
import { AsyncStorage } from 'react-native';
// const API_URL = 'http://localhost:5500';
const API_URL = 'https://trail-api.herokuapp.com';
export default class Backend {
static logIn(username, password){
fetch(`${API_URL}/users/login`, {
method: 'POST',
headers: {
Accept: 'application/json'
},
body: {
username: username,
password: password
}
});
}
static signUp(firstname, lastname, username, email, password){
fetch(`${API_URL}/users/register`, {
method: 'POST',
headers: {
Accept: 'application/json'
},
body: {
firstname: firstname,
lastname: lastname,
username: username,
email: email,
password: password,
confirmpassword: password
}
});
}
static getUser(){
AsyncStorage.getItem('@Trail:user');
}
static getFeed(username){
fetch(`${API_URL}/user/${username}/feed`);
}
static logOut(user){
AsyncStorage.removeItem('@Trail:user');
}
static followUser(user, username){
fetch(`${API_URL}/users/${username}/follow`, {
method: 'POST',
headers: {
Accept: 'application/json'
}
});
}
static createPost(user, text, longitude, latitude){
fetch(`${API_URL}/posts/new`, {
method: 'POST',
headers: {
Accept: 'application/json'
},
user: user,
body: {
text: text,
location: {
longitude: longitude,
latitude: latitude
}
}
});
}
static likePost(user, id){
fetch(`${API_URL}/posts/${id}/like`, {
method: 'POST',
headers: {
Accept: 'application/json'
},
user: user,
params: {
id: id
}
});
}
static unlikePost(user, id){
fetch(`${API_URL}/posts/${id}/unlike`, {
method: 'POST',
headers: {
Accept: 'application/json'
},
user: user
});
}
static getComments(id){
fetch(`${API_URL}/posts/${id}/comments`, {
method: 'GET',
headers: {
Accept: 'application/json'
}
});
}
}
如果我像这样调用任何组件,我希望代码能够工作:
async login(){
const { username, password } = this.state;
await Backend.logIn(username, password)
.then((response) => response.json())
.then((responseJSON) => AsyncStorage.setItem('@Trail:user',
JSON.stringify(responseJSON.user)));
() => navigate('Home');
}
但相反,它抛出了一个拒绝承诺的错误。我有什么遗漏吗?
更新:请查看下图以了解错误:
您能试着返回回执(这样您就可以在事后真正领会承诺)如下:
您得到的实际错误是什么?Stacktrace?顺便说一句,您可能会遇到这个错误,因为您的
后端
类静态方法实际上没有返回承诺
,因此等待
会抛出Exception@AlexandreWiechersVaz看起来他们是从代码中看到的。
static logIn(username, password){
return fetch(`${API_URL}/users/login`, {
method: 'POST',
headers: {
Accept: 'application/json'
},
body: {
username: username,
password: password
}
});
}