Оберните API выборки в метод класса React Native

Чтобы сделать мой код 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');
}

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

Оберните API выборки в метод класса React Native

Какую ошибку вы получаете на самом деле? Трассировки стека?

Alexandre Wiechers Vaz 07.06.2018 16:06

Кстати, вы, вероятно, получаете эту ошибку, потому что ваши статические методы класса Backend на самом деле не возвращают Promises, поэтому await выдает исключение

Alexandre Wiechers Vaz 07.06.2018 16:10

@AlexandreWiechersVaz выглядит так, как будто они это делают из кода.

Jared Smith 07.06.2018 20:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
897
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не могли бы вы попробовать вернуть выборку (чтобы потом можно было поймать обещание) вот так:

 static logIn(username, password){
    return fetch(`${API_URL}/users/login`, {
          method: 'POST',
          headers: {
            Accept: 'application/json'
          },
          body: {
            username: username,
            password: password
          }
    });
}

Другие вопросы по теме