Wrap fetch API в методе класса React Native - PullRequest
0 голосов
/ 07 июня 2018

Чтобы сделать мой React Native более структурированным, в своем последнем проекте я решил создать класс, который будет содержать все запросы на выборку.Структура класса показана ниже:

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');
}

Но вместо этого он выдает Обещаниеошибка отклонения.Я что-то пропустил?ОБНОВЛЕНИЕ: пожалуйста, посмотрите на изображение ниже для ошибки:

Error code for the fetch.

1 Ответ

0 голосов
/ 07 июня 2018

Можете ли вы попробовать вернуть извлечение (чтобы вы могли потом поймать Обещание) следующим образом:

 static logIn(username, password){
    return fetch(`${API_URL}/users/login`, {
          method: 'POST',
          headers: {
            Accept: 'application/json'
          },
          body: {
            username: username,
            password: password
          }
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...