5
votes

fetch () injectant une variable de requête / une valeur d'en-tête à chaque appel

Pour le moment, dans mon application React-Native, j'ai les éléments suivants:

fetch('http://localhost/SOMETHING', { 
    method: 'GET', 
    headers: { 
        'Content-Type': 'application/json', 
        'Authorization': 'Bearer '+this.state.authtoken 
    } 
})

Objectif: faire savoir à mon API quel UID effectue l'appel. Je sais que cela devrait être en authtoken, mais différents utilisateurs peuvent avoir le même authtoken.

Ma première pensée est d'ajouter un ? Uid = $ {UID} à la fin de chaque URL . Cependant, j'ai GET, POST, PATCHs, avec leur propre ensemble de requêtes

Une autre pensée serait d'ajouter une valeur d'en-tête avec les données UID.

Indépendamment de ce que je choisis, cela ce serait génial de pouvoir ajouter cette valeur à chaque FETCH sans avoir à faire beaucoup de travail.

Est-ce quelque chose qui est possible? Ouvert aux suggestions sur ce que vous feriez.

javascript reactjs react-native node.js

4 commentaires

Pouvez-vous simplement créer une méthode d'aide qui l'ajoute? Au lieu d'appeler fetch directement, vous appelez votre méthode qui effectue l'appel fetch?

Quel est le problème avec l'ajout d'un autre en-tête appelé UID?

@bhspencer Il n'y a rien de mal à cela. Essayer simplement de trouver la solution la plus efficace

+1 pour les méthodes d'aide de @ epascarello. Notre base de code a un fichier d'extraction avec fetchJSON (gère l'analyse de la réponse), fetchWithAuth (ajoute l'en-tête Bearer), postJSON (method = 'POST'), putJSON (method = 'PUT'). C'est également un endroit utile pour valider la réponse et prétraiter les erreurs.

3 Réponses :

0
votes

Si vous le pouvez, le mieux serait de passer à Axios ( https://github.com/axios/axios ) - c'est beaucoup plus facile de le faire là-bas.

Mais si vous devez utiliser fetch, https://github.com/werk85/fetch-intercept est votre solution.

Exemple de code

fetchIntercept.register({
  request: (url, config) => {

   config.headers = {
     "X-Custom-Header": true,
      ...config.headers
   };

    return [url, config];
  }
});

0 commentaires

0
votes

Je ne sais pas si vous êtes prêt à abandonner fetch , mais nous utilisons apisauce .

import { fetch } from '../api';

fetch('http://localhost/SOMETHING');

modifier

Si vous souhaitez le conserver à proximité de fetch , vous pourrait créer une fonction d'assistance.

import { setAuthToken } from '../api';

// e.g. after login
setAuthToken('token');

Vous n'utiliserez probablement la fonction setAuthToken qu'une seule fois.

let authToken = null;

export const setAuthToken = token => {
  authToken = token;
};

export const fetch = (url, options) => {
  if (!options) {
    options = {};
  }

  if (!options.headers) {
    options.headers = {};
  }

  if (authToken) {
    options.headers['Authorization'] = `Bearer ${authToken}`;
  }

  return fetch(url, options);
};

Ensuite, là où vous utiliseriez normalement fetch:

import { create } from 'apisauce';

const api = create({
  baseURL: 'http://localhost',
  headers: { 'Accept': 'application/json' },
});

api.addRequestTransform(request => {
  if (accessToken) {
    request.headers['Authorization'] = `bearer ${accessToken}`;
  }
});

api.get('/SOMETHING');

Je n'envisagerais pas de créer une fonction d'assistance unique et une instruction d'importation supplémentaire pour chaque extraction beaucoup de "travail supplémentaire".

0 commentaires

0
votes

Vous pouvez créer une fonction wrapper pour la récupération avec l'uid

const fetchOptions = {
    method: 'POST',
    body: {
        hello: 'world',
    },
};

fetchWithUid('http://localhost/SOMETHING', 123, 'abcd', fetchOptions);

Utilisez la fonction fetchWithUid comme ceci, les options fetchOptions imitent simplement l'option de la fonction de récupération d'origine. p>

function fetchWithUid(baseUrl, uid, authtoken, options) {
    const { method, headers, body, ...rest } = options;
    const fetchOptions = {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + authtoken,
            ...headers,
        },
        method,
        ...rest,
    };

    if (body) {
        fetchOptions.body = JSON.stringify(body);
    }

    return fetch(`${baseUrl}?uid=${uid}`, fetchOptions);
}

0 commentaires