Ax ios - Ax ios .defaults.baseUrl работает, а instance.baseUrl - нет

Question

Я хочу использовать относительные пути в моем коде, поэтому мне нужно установить параметр baseUrl в axios. Установка его в глобальном объекте Ax ios работает, но на instance - нет (он запрашивает, как будто не было установлено baseUrl). Буду рад узнать почему :)

Заранее спасибо.

import React, { Component } from 'react';
import Axios from 'axios';

Axios.defaults.baseURL = "http://localhost:3000";
let instance = Axios({
  baseUrl: 'http://localhost:3000'
});

class CardViewer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      cards: []
    }
  }

  componentDidMount() {
    // instance.get('/cards').then(response => {
    //   this.setState({
    //     cards: response.data
    //   });
    // }); doesn't working
    Axios({
      method: 'get',
      url: '/cards'
    }).then(response => {
      this.setState({
        cards: response.data
      })
    });
  }

  render() {
    let cardsElements = this.state.cards.map(card => 
    <div className="card my-1 col-6 mx-auto" key={card.id}>
      <div className="card-body">
        <div className="card-title">{card.author}</div>
        <div className="card-text">{card.text}</div>
      </div>
    </div>);

    return <div className="container-fluid my-3">
      { cardsElements }
    </div>
  }
}

export default CardViewer;

Answer 1

Привет, вы можете попробовать создать экземпляр, используя этот фрагмент кода

const callWebService = (options) => {
    const axiosInstance = axios.create({
        baseURL: config.serverURL,
        withCredentials: true,
        timeout: 1000 * 10
    });
    return axiosInstance(options);
};

Answer 2

Создайте экземпляр следующим образом:

const instance = Axios.create({
    baseURL: 'http://localhost:3000',
});

А затем используйте его, как хотите:

instance.get('/cards').then(response => {/* response processing */})

Здесь вы можете узнать больше о создании экземпляра.