Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/449.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在类方法React Native中包装获取API_Javascript_Reactjs_Oop_React Native - Fatal编程技术网

Javascript 在类方法React Native中包装获取API

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

为了使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(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
          }
    });
}