使用 React Typescript 在 Axios 中配置 Base Url

Question

如何使用 React Typescript 在 axios 中设置我的 baseURL？

我试过axios.defaults.baseURL = 'myurl.com';

但是，它不起作用。在网络选项卡中，它表示承诺正在等待中。

知道如何实现吗？

import { useQuery } from 'react-query'
import axios from 'axios'

axios.defaults.baseURL = 'myurl.com';


const useCampaign = (token: string, campaignID: string) =>
  useQuery(
    'campaign',
    () =>
      axios
        .get(`/api/campaigns?lgp-webview-token=${token}`, {
          headers: { 'X-Campaign-ID': campaignID }
        })
        .then((res) => res.data),
    {
      retry: false,
      refetchOnWindowFocus: false
    }
  )

export default useCampaign

Answer 1

创建一个名为 axios.js 的文件并设置以下内容，然后将该文件作为 import axios from "./axios"; 导入到您需要的组件中，然后在您的代码中使用此本地 axios

import axios from "axios";

const instance = axios.create({

  baseURL: "myurl.com"
});

export default instance;

使用 React Typescript 在 Axios 中配置 Base Url

Configure Base Url in Axios with React Typescript

reactjs

axios

react-typescript

react-query