Réagir Http Natif De L'Intercepteur

Comme la plupart des applications, je suis en train d'écrire une application qui nécessite beaucoup de logique similaire dans la réponse http/demandes des gestionnaires. Par exemple, je dois toujours vérifier l'actualisation de jetons et de les enregistrer sur le AsyncStorage, ou de toujours définir les en-têtes pour mon AuthService en-têtes, ou même vérifier 404 de la route à la même page d'erreur 404.

Je suis un grand fan de la http intercepteur Angulaire; où vous pouvez définir et enregistrer un http intercepteur (faute d'un meilleur terme) d'intercepter tout le trafic http et puis exécutez le combiné, la logique commune.

J'ai 2 questions principales:

  1. Depuis de Réagir Natif, nous définissons ces composants indépendants, devrait nous pas extraction des communes http logique, en premier lieu, afin de préserver la ré-utilisabilité du composant?
  2. Si nous ne voulons pas dupliquer le code, est-il un moyen de Réagir Maternelle (première) ou Objective-C/Swift (deuxième) pour intercepter le trafic http et de fournir des gestionnaires pour les demandes?

OriginalL'auteur Lfa | 2015-07-08

  1. 15

    Avez-vous envisagé d'axios si vous essayez d'intercepter xhr?
    Je suis à l'aide d'axios intercepteurs - https://www.npmjs.com/package/axios
    et jusqu'à présent, il semble fonctionner.

    Voici un exemple de code

    import axios from 'axios';
import promise from 'promise';

//Add a request interceptor 
var axiosInstance = axios.create();

axiosInstance.interceptors.request.use(function (config) {
  //Do something before request is sent 
  //If the header does not contain the token and the url not public, redirect to login  
  var accessToken = getAccessTokenFromCookies();

  //if token is found add it to the header
  if (accessToken) {
    if (config.method !== 'OPTIONS') {
          config.headers.authorization = accessToken;
        }
  }
  return config;
}, function (error) {
   //Do something with request error 
   return promise.reject(error);
});

export default axiosInstance;

    puis importer ce axiosInstance où jamais vous voulez faire xhr appels

    Nice! les nouveaux paquets! merci 🙂
    Comment êtes-vous importer axiosInstance tout en faisant appel? Je suis en mesure de faire la demande mais axiosInstance de rappel n'est pas de se faire licencier
    Vous devez utiliser la nouvelle instance. - importation axiosInstance de '../passerelle/axiosInstance' la fonction d'exportation processBooks(nom d'utilisateur, de l'âge) { var booksUrl = '/service/processus-livres?nom=' + encodeURIComponent(nom d'utilisateur) + '&age=' + encodeURIComponent(âge); request = axiosInstance.la poste(booksUrl); demande de retour; }
    Êtes-vous le stockage de accessToken dans AsyncStorage ou quelque part d'autre?
    avez-vous une idée de comment faire de l'intercepteur pour tous les types de http appel de réagir application native et aussi de webview avec à réagir application native

    OriginalL'auteur Amit Teli

  2. 2

    Je ne suis pas sûr si je suis à la compréhension de cette question correctement, ou si vous cherchez plus de la magie, mais il semble que vous voulez juste un wrapper pour la XMLHttpRequest (ou fetch API). L'envelopper dans une classe ou une fonction et vous pouvez faire ce que vous voulez, quand vous le voulez. Voici un exemple d'une xhr enveloppé dans une promesse:

    function request(url, method = "GET") {
  const xhr = new XMLHttpRequest();

  //Do whatever you want to the xhr... add headers etc

  return new Promise((res, rej) => {
    xhr.open(method, url);
    xhr.onload = () => {
      //Do whatever you want on load...
      if (xhr.status !== 200) {
        return rej("Upload failed. Response code:" + xhr.status);
      }
      return res(xhr.responseText);
    };
    xhr.send();
  });
}

    Ensuite, vous pouvez l'utiliser quand vous le souhaitez faire appel HTTP...

    request("http://blah.com")
  .then(data => console.log(`got data: ${data}`))
  .catch(e => console.error(`error: ${e}`));
    Ouais c'est le chemin que j'ai fini par aller dans. J'ai été à la recherche pour que la magie qui me permet de pousser les choses sur le navigateur de la pile (push de ce volet de la pile lorsque l'utilisateur n'a pas accès à internet, ou toujours de redirection de connexion lors de la 401, etc...).

    OriginalL'auteur Mr Speaker