web-dev-qa-db-fra.com

Passer des paramètres de chemin dans axios

J'utilise Axios avec NodeJs et j'essaie de passer les paramètres de chemin dans la méthode axios.get(). Par exemple, si l'URL est url = '/fetch/{date}', Je veux remplacer {date} Par la date réelle lors de l'appel de axios.get(url).

J'ai parcouru le code source sur Github et StackOverflow, mais je n'ai trouvé aucune méthode.

Est-il possible de conserver des URL avec des paramètres comme espace réservé et de les remplacer tout en appelant réellement la méthode get d'Axios?

node.jsaxios
7
Saheb

Utiliser des chaînes de modèle

    url = `/fetch/${date}`

Ou marquez-le simplement

    url = '/fetch/'+ date
4
Enda Molloy

Étant donné une certaine API /fetch/${date} vous voudrez probablement envelopper votre appel axios dans une fonction.

const fetchData = (date) => axios.get(`/fetch/${date}`);

fetchData(dateObject.toFormat('yyyy-mm-dd'))
  .then(result => { ... });

Cela nécessite cependant le code appelant pour formater date correctement. Vous pouvez éviter cela en utilisant une bibliothèque DateTime qui gère l'analyse des chaînes de date et applique la mise en forme dans la fonction.

const fetchData = (date) => axios.get(`/fetch/${date.toFormat('yyyy-mm-dd')}`);

fetchData(dateObject)
  .then(result => { ... });
1
Drew Reese

Je pense qu'il est préférable d'utiliser des intercepteurs axios:

//create your instance
const instanceAxios = axios.create({
  baseUrl: 'http://localhost:3001'
]);

instanceAxios.interceptors.request.use(config => {
    if (!config.url) {
        return config;
    }

    const currentUrl = new URL(config.url, config.baseURL);
    // parse pathName to implement variables
    Object.entries(config.urlParams || {}).forEach(([
        k,
        v,
    ]) => {
        currentUrl.pathname = currentUrl.pathname.replace(`:${k}`, encodeURIComponent(v));
    });

    const authPart = currentUrl.username && currentUrl.password ? `${currentUrl.username}:${currentUrl.password}` : '';
    return {
        ...config,
        baseURL: `${currentUrl.protocol}//${authPart}${currentUrl.Host}`,
        url: currentUrl.pathname,
    };
});


// use like : 
instanceAxios.get('/issues/:uuid', {
   urlParams : {
       uuid: '123456789
   }
})

Pour les utilisateurs de TypeScript, vous devrez l'ajouter dans l'un de vos fichiers .d.ts

declare module 'axios' {
    interface AxiosRequestConfig {
        urlParams?: Record<string, string>;
    }
}

(c'est un POC, pas vraiment testé, n'hésitez pas si vous voyez quelque chose de mal)

0
thib3113

Axios n'a pas cette fonctionnalité et il semble que l'équipe ne veuille pas l'ajouter .

Avec le crédit des répondants précédents pour l'inspiration, cela me semble être la solution la plus proche de ce que vous (et moi) recherchez:

1 - Où vous souhaitez stocker toutes vos URL et leurs paramètres, définissez-les comme des fonctions qui utilisent une chaîne de modèle pour renvoyer l'URL composée:

export var fetchDateUrl = (date) => `/fetch/${date}`;

Si vous avez besoin d'une mise en forme spécifique au type de la valeur concaténée dans l'URL, cette fonction est un bon endroit pour le faire.

2 - Où vous souhaitez faire la demande, appelez la fonction avec les paramètres corrects:

import { fetchDateUrl } from 'my-urls';
axios.get(fetchDateUrl(someDateVariable))...;

Autre variante, si vous aimez vraiment l'idée de nommer les paramètres sur le site de l'appel, vous pouvez définir la fonction URL pour détruire un objet comme celui-ci:

var fetchDateUrl = ({date}) => `/fetch/${date}`;

que vous utiliseriez alors comme ceci:

axios.get(fetchDateUrl({date: someDateVariable}));
0
Graham Lea

Vous pouvez utiliser des chaînes de modèle, à savoir:

let sellerId = 317737

function getSellerAnalyticsTotals() {
    return axios.get(`http://localhost:8000/api/v1/seller/${sellerId}/analytics`);
}
0
Gabriel Borges Oliveira

vous pouvez faire comme ça:

    getProduct = (id) => axios.get(`product/${id}`, id);
0
sajad abbasi