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-react-app创建了一个新的react应用，但这似乎不再起作用。

Answer 1

您能解决这个问题吗？我用两种方法解决了这个问题：

1。）使用默认参数，并在使用请求时传播它们

export const API_DEFAULT_PARAMS = {
  part: 'part',
  maxResults: 5,
  key: 'key'
}

export default axios.create({
  baseURL: 'http://somebigurlhere',
});

然后使用它：

import api, { API_DEFAULT_PARAMS } from './place/where/previous/file/is';
    ....
api.get('/search', {
   params: {
    // spread the default params
     ...API_DEFAULT_PARAMS,
    // add your own parameters here
     q: 'word',
   }
});

2。）在此处建议使用拦截器作为用户

const instance = axios.create({
  baseURL: 'http://somebigurlhere',
}); 

instance.interceptors.request.use(config => {
  config.params = {
   // add your default ones
   part: 'part',
   maxResults: 5,
   key: 'key',
   // spread the request's params
    ...config.params,
  };
  return config;
});

export default instance;

然后使用它

import api from './place/where/previous/file/is';
...
api.get('/search', {
 params: {
   q: 'word',
 }
});

我更喜欢拦截器方法，因为它可以将默认参数抽象到实例文件本身，并且您不必每次使用实例时都导入和散布对象。

Answer 2

降级axios的版本。最新版本存在一些问题

@org.junit.Test
public void should$EXPR$when$CONDITION$() {
    org.junit.Assert.assertThat(null, org.hamcrest.CoreMatchers.is(org.hamcrest.CoreMatchers.nullValue())); 
}

Answer 3

使用应返回这样的自定义对象

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

然后使用自定义对象发出请求

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

请在此codepen

中尝试类似的示例

然后您将在控制台中看到，查询参数在请求（蓝线）中合并在一起，如下图

Answer 4

只需创建一个配置对象并将其传递给您的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'
    }
});

更大的修改 此编辑显示了如何在我的答案中对每个OP的评论做出反应。可以在这里找到演示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);

默认查询参数未在axios请求中传递

4 个答案: