在类方法 React Native 中包装 fetch API

debugcn 发表于 Dev

奥卢瓦科雷德·法绍昆

为了让我的 React Native 代码更加结构化，在我最新的项目中，我决定创建一个类来保存所有 fetch 请求。类的结构见下图：

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

但相反，它会抛出一个 Promise 拒绝错误。有什么我想念的吗？更新：请查看下图以了解错误：

原型

你能不能尝试像这样返回 fetch （这样你就可以在之后实际捕获 Promise）：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。