Параметры запроса по умолчанию не передаются в запросе axios

Question

Я использую axios.create () для передачи baseURL и некоторых параметров запроса по умолчанию, таких как

axios.create({
    baseURL: 'http://somebigurlhere',
    params: {
        part: 'part',
        maxResults: 5,
        key: 'key'
   }
});

Когда я использую

axios.get('/search', {
    params: {
        q: 'word'
    }
});

параметры по умолчанию не объединяются в вызове GET.

Что я получаю http://somebigurlhere/search?q=word

вместо http://somebigurlhere/search?part=part&maxResults=5&key=key&q=asd

Я пытался выставить конфигурацию многими другими способами, но она все еще не работает. Я что-то здесь не так делаю?

Я пробовал то же самое в других проектах, и он работает там. Просто создал новое приложение реагирования с помощью create-реагировать-приложение, и это больше не работает.

Answer 1

Использование должно вернуть пользовательский объект, подобный этому

const custom = axios.create({
    baseURL: 'http://somebigurlhere',
    params: {
        part: 'part',
        maxResults: 5,
        key: 'key'
   }
});

Затем используйте пользовательский объект, чтобы сделать запрос

custom.get('/search', {
    params: {
        q: 'word'
    }
});

Пожалуйста, попробуйте подобный пример в этом коде

Тогда вы увидите в консоли, параметры запроса объединены в запросе (синяя линия), как показано ниже

Answer 2

Просто создайте объект конфигурации и передайте его в свой запрос Axios.get.

const config = {
    baseURL: 'www.someurl.com',
    params: {
        part: 'part',
        maxResults: 5,
        key: 'key'
    }

}

axios.get('/waffles', config);

Пример:

const config = {
    baseURL: 'https://reqres.in',
    params: {
        per_page: 3
    }
}

axios.get('/api/users?page=1', config).then(response => {console.log(response)}).catch(err => {console.log(err)});

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Если вы хотите использовать axios.create, вам нужно присвоить его переменной в качестве объекта экземпляра axios, а затем выполнить запрос к этому экземпляру.

var instance = axios.create({
    baseURL: 'https://reqres.in',
    params: {
        per_page: 5
    }
});
instance.get('/api/users?page=1').then(response => {console.log(response)}).catch(err => {console.log(err)});

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Так что для вашего точного примера, как я уже сказал, присвойте axios.create переменной, а затем выдайте ваш .get из этого.

var instance = axios.create({
        baseURL: 'http://somebigurlhere',
        params: {
            part: 'part',
            maxResults: 5,
            key: 'key'
        }
    });


instance.get('/search', {
    params: {
        q: 'word'
    }
});

Больше Редактировать Это редактирование показывает, как это сделать в ответе на комментарий ОП в моем ответе. Фактическая песочница, демонстрирующая htis, может быть найдена здесь: https://codesandbox.io/embed/cranky-aryabhata-2773d?fontsize=14

// файл axios_control.js

import axios from "axios";
export const instance = axios.create({
  baseURL: "https://reqres.in",
  params: {
    per_page: 5
  }
});

// файл index.js Обратите внимание на импорт из axios_control и использование для регистрации возвращаемых данных прямо перед рендерингом.

import React from "react";
import ReactDOM from "react-dom";
import { instance } from "./axios_control";

import "./styles.css";

function App() {
  instance.get("/api/users").then(response => {
    console.log(response);
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);