React Native AsyncStorage: получите токен и используйте его в переработанном извлечении API - PullRequest
Новая
       23

React Native AsyncStorage: получите токен и используйте его в переработанном извлечении API

0 голосов
/ 27 октября 2018

Я решил поместить все свои вызовы API в отдельный файл, и все они не сохраняют состояния. 

const get = endPoint => {
  let token = "c8c17003468314909737ae7eccd83d4b6eecb792"; //I have put this token here manually    
  return fetch(endPoint, {
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: "Token " + token
    }
  }).then(response => response.json());
};

и в том же файле у меня есть фактические вызовы API. Пример выглядит следующим образом. 

export const loadGroups = () => {
  const endPoint = "https://xxxx.com/api/groups/";
  return get(endPoint);
};

Это прекрасно работает, когда я вызываю API из различных компонентов следующим образом. 

import { loadGroups } from "../../api";
componentDidMount() {
    loadGroups()
      .then(responseJson => {
        this.setState({
          groups: responseJson
        });
      })
      .catch(error => {
        console.error(error);
      });
      }

Однако я хочу использовать AsyncStorage для извлечения сохраненного токена, и его надлежащая природа - вернуть обещание. Это хорошо работает, когда я пишу функции получения токена и сохранения его в SetState в каждом компоненте, для которого я выполняю вызовы. Я действительно хочу реорганизовать код, и использование избыточности - это боль для меня.

Пока я написал файл для получения токена, и он возвращает обещание. 

import { AsyncStorage, Text } from "react-native";

const MyToken = async () => {
  try {
    const retrievedItem = await AsyncStorage.getItem("userToken");
    const item = JSON.parse(retrievedItem);
    return item;
  } catch (error) {
    return null;
  }

};

export default MyToken;

И в файле API я переписал приведенный выше код в 

const get = endPoint => {
  MyToken().then(token => {
    console.log(token, "try 1"); //this works
    const lookupOptions = {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: "Token " + token
      }
    };
    return fetch(endPoint, lookupOptions).then(response => {
      console.log(response.json(), "promise response,json");
      response.json();
    });
  });

};

Однако всякий раз, когда я вызываю функцию loadGroups (). Then () (как в первом примере) в любом компоненте, я получаю сообщение об ошибке, что loadGroups.then () не может быть решена

Есть ли способ решить эту проблему без учета состояния, избыточности, mobx, если я хочу, чтобы мой код API выполнялся в функциях без сохранения состояния в отдельных модулях.

1 Ответ

0 голосов
/ 27 октября 2018

В V2 функции get вы не возвращаете Promise. Либо поместите оператор return в функцию get, например 

const get = endPoint => {
  return MyToken().then(
    ...
  );
}

Или вернуть Promise явно из этой функции, рассмотрите следующие фрагменты кода 

const get = endPoint => {
  return new Promise((resolve, reject) => {
    MyToken().then(token => {
      ...
      fetch(endPoint, lookupOptions)
      .then(response => response.json())
      .then(resolvedResponse => {
        resolve(resolvedResponse);
      }).catch(error => {
        reject(error);
      });
    });
  });
};

Надеюсь, это поможет!

...