web-dev-qa-db-fra.com

Comment utiliser 2 instances d'Axios avec une baseURL différente dans la même application (vue.js)

J'essaie d'apprendre vue.js, j'ai donc créé une petite application qui affiche les articles de presse d'une API et, dans une autre vue, permet à l'utilisateur de se connecter à un autre serveur.

Pour cela, j'utilise Axios. Je sais que je l'ai assez bien fonctionné à un moment donné, mais aujourd'hui, au démarrage de mon projet, il est tout simplement impossible de faire fonctionner les deux API simultanément.

Voici mon service de connexion:

import axiosTrainingAPI from 'axios'

axiosTrainingAPI.defaults.baseURL = 'https://api.**********.com'

const trainingAPI = {
  login (credentials) {
    return new Promise((resolve, reject) => {
      axiosTrainingAPI.post('/services/auth.php', credentials)
        .then(response => {
          resolve(response.data)
        }).catch(response => {
          reject(response.status)
        })
    })
  }
}

export default trainingAPI

Voici mon service d'actualités:

import axiosGoogleNewsAPI from 'axios'

axiosGoogleNewsAPI.defaults.baseURL = 'https://newsapi.org'

const googleNewsAPI = {
  getPosts (newsId) {
    return new Promise((resolve, reject) => {
      axiosGoogleNewsAPI.get(`/v2/everything?q=${newsId}&sortBy=publishedAt&apiKey=***********`)
        .then(response => {
          resolve(response.data)
        }).catch(response => {
          reject(response.status)
        })
    })
  }
}

export default googleNewsAPI

Ces deux services sont dans des fichiers JS différents et sont importés dans différents fichiers vue mais il semble qu'ils ne peuvent plus coexister et il y en a toujours un qui écrase l'URL de base de l'autre (pas toujours le même) presque comme si l'instance d'Axios était la même dans les deux cas. Donc, parfois, le premier service utilise la baseURL du second, parfois c'est le second qui utilise la baseURL du premier ...

Je ne connais pas exactement la portée de `` l'importation '' car c'est assez nouveau pour moi, mais les deux instances sont dans des fichiers différents, ont des noms différents, donc je ne comprends pas vraiment comment elles se mélangent. Sauf si 'import' appelle toujours la même instance d'un module mais comment puis-je travailler avec 2 API? Et pourquoi ça a marché hier ... Je suis confus.

javascriptecmascript-6vue.jsaxios
14
manu

Vous voudrez créer une nouvelle instance d'axios avec une configuration personnalisée pour chaque API que vous voulez qui a un baseURL distinct.

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
23
PatrickSteele

Vous pouvez simplement utiliser plusieurs instances d'axios, chacune ayant sa propre configuration. Par exemple,


    import axios from "axios";

    // For common config
    axios.defaults.headers.post["Content-Type"] = "application/json";

    const mainAxios = axios.create({
        baseURL: 'https://some-domain.com/api/'
    });

    const customAxios = axios.create({
        baseURL: 'https://some-custom-domain.com/api/'
    });


    export {
      mainAxios,
      customAxios
    };
5
Saahil Madaan

Oui, pour plus de clarté:

let config = {baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {
   'X-Custom-Header': 'foobar',
    'Authorization' : `Bearer ${auth.token}` //where applicable
  }
};
let instance = axios.create(config);

En outre, vous pouvez spécifier les paramètres de configuration par défaut qui seront appliqués à chaque demande.

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form- 
urlencoded';```
3
w3bh4ck

J'avais la même question et pour la résoudre, j'ai créé une interface et une fonction (Exemple en TS):

export function createClient(baseURL: string) {
  return axios.create({
    baseURL: baseURL,
    headers: { "Content-Type": "application/json" }
  });
}

export interface ConfigurableApi {
  configure(config: Configuration);
}

Et pour chaque client, j'ai créé une classe

@Singleton()
export class ApiOfClientA implements ConfigurableApi {
  client!: AxiosInstance;

  configure(config: Configuration) {
    this.client = createClient(config.endpoints.mars);
  }

  ...
}

Si vous souhaitez utiliser JS, vous pouvez probablement faire quelque chose comme:

import axios from "axios";

let clientA;
const ClientA = {
    init(baseURL) {
        clientA = axios.create({
            baseURL: `${baseURL}`,
            headers: {"Content-Type": "application/json"}
        });
    },
    ...
};

export {ClientA};

puis importez-le simplement dans le fichier dont vous avez besoin pour l'utiliser:

import {ClientA} from "./api/client-a";
0
Daniel Shterenberg