web-dev-qa-db-ja.com

同じアプリで異なるbaseURLを持つAxiosの2つのインスタンスを使用する方法（vue.js）

私はvue.jsを学習しようとしているので、APIからのニュース記事を表示し、別のビューでユーザーが別のサーバーにログインできるようにする小さなアプリを作成しました。

このため、私はAxiosを使用しています。ある時点でかなりうまく機能することはわかっていますが、今日プロジェクトを開始するとき、両方のAPIを同時に動作させることは不可能です。

これが私のログインサービスです：

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

これが私のニュースサービスです。

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

これらのサービスは両方とも異なるJSファイルにあり、異なるvueファイルにインポートされますが、現在は共存できず、常に一方が他方のbaseURLを上書きしている（常に同じとは限らない）ようです。 Axiosインスタンスが両方のケースで同じである場合と同様です。そのため、最初のサービスが2番目のサービスのbaseURLを使用する場合もあれば、最初のサービスが最初のサービスのbaseURLを使用する場合もあります...

「インポート」の範囲は正確にわかりません。それは私にとっては非常に新しいのですが、両方のインスタンスが異なるファイルにあり、名前が異なるため、どのように混同されるのか本当にわかりません。 'import'が常にモジュールの同じインスタンスを呼び出す場合を除いて、2つのAPIをどのように操作しますか？そして、なぜそれが昨日うまくいったか...私は混乱しています。

javascriptecmascript-6vue.jsaxios
14
manu

axiosの新しいインスタンスを作成する には、個別のbaseURLが必要なAPIごとにカスタム構成を指定します。

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

それぞれ独自の構成を持つaxiosの複数のインスタンスを使用できます。例えば、


    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

わかりやすくするために、

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);

また、すべてのリクエストに適用されるデフォルト設定を指定できます。

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

同じ質問があり、それを解決するために、インターフェースと関数を作成しました（TSの例）：

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

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

そして、すべてのクライアントのために、私はクラスを作成しました

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

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

  ...
}

JSを使用したい場合は、おそらく次のようなことができます。

import axios from "axios";

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

export {ClientA};

次に、使用する必要があるファイルにインポートします。

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