如何在 ReactJS 中使用多个 baseURL axios？答案

【问题标题】：How to use multiple baseURL axios in ReactJS?如何在 ReactJS 中使用多个 baseURL axios？
【发布时间】：2020-03-26 08:10:22
【问题描述】：

我有一个配置文件。我正在为整个应用程序设置 baseURL 并为整个 API 请求保存不记名令牌。在这里，我可以添加另一个 api。我不知道如何添加另一个 baseURL 并在我的 API 请求中使用它。在这里我分享我所做的代码。

基础网址文件：

import axios from 'axios';
axios.defaults.baseURL = http://localhost:3000/summary;

const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common.Authorization = `Bearer ${token}`;
  } else {
    delete axios.defaults.headers.common.Authorization;
  }
};

export default setAuthToken;

API 操作文件：

export const login = ({ email, password }) => async (dispatch) => {

  const userData = {
    username: email,
    password,
  };

  try {
    const res = await axios.post('/license-api/auth/login', userData, config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data.token,
    });
  } catch (error) {
    dispatch({
      type: LOGIN_FAIL,
    });

  }
};

我需要在 BASE URL FILE 中添加另一个这样的 url

axios.defaults.baseURL = http://localhost:6000/profile

如何添加这个并在 API 操作文件中使用它。

请帮帮我。

提前致谢

【问题讨论】：

用不同的值创建两个不同的客户端实例？ npmjs.com/package/axios#creating-an-instance
你好，如何在动作文件中使用该实例？
从定义的地方导入它，就像其他任何东西一样。

标签： reactjs react-redux axios react-hooks

【解决方案1】：

如前所述，您可以创建两个 instances of axios 并根据需要使用它们：

在你的 BASE URL 文件中：

import axios from 'axios';

const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common.Authorization = `Bearer ${token}`;
  } else {
    delete axios.defaults.headers.common.Authorization;
  }
};

const mainAxios = axios.create({
  baseURL: 'http://localhost:3000/summary'
});

const profileAxios = axios.create({
  baseURL: 'http://localhost:6000/profile'
});

export default setAuthToken;
export { mainAxios, profileAxios };

然后在您的 API ACTION 文件中：

import { profileAxios } from 'path/to/baseurl';

export const login = ({ email, password }) => async (dispatch) => {

  const userData = {
    username: email,
    password,
  };

  try {
    const res = await profileAxios.post('/license-api/auth/login', userData, config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data.token,
    });
  } catch (error) {
    dispatch({
      type: LOGIN_FAIL,
    });

  }
};

【讨论】：

【解决方案2】：

上面的代码运行良好。我看不到在哪里调用 setAuthToken，所以如果您不想手动调用 setAuthToken，那么您可能需要这样做。

import axios from "axios";
import { config } from "./config";

const pythonAPI = axios.create({
  baseURL: config.pythonServerUrl,
});

const nodeApi = axios.create({
  baseURL: config.nodeServerUrl,
});

const setToken = () => {
  const token = localStorage.getItem("auth_token");
  if (token) {
    pythonAPI.defaults.headers.common.Authorization = `Basic ${token}`;
  } else {
    delete pythonAPI.defaults.headers.common.Authorization;
  }
};

const pythonApi = {};

pythonApi.get = async (url) => {
  setToken();
  return pythonAPI.get(url).catch((e) => e.response);
};

pythonApi.post = async (url, data) => {
  setToken();
  return pythonAPI.post(url, data).catch((e) => e.response);
};

export { pythonApi, nodeApi };

【讨论】：