默认查询参数未在 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-react-app 创建了一个新的反应应用程序，这似乎不再起作用了。

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. 使用拦截器作为用户建议here

   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.get 请求。

\n\n

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

\n\n

\xc2\xa0 }

\n\n

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

\n\n

例子：

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

如果您想使用 axios.create，您需要将其作为 axios 实例对象分配给一个变量，然后针对该实例运行您的请求。

\n\n

\r\n

\r\n

const config = {\r\n    baseURL: \'https://reqres.in\',\r\n    params: {\r\n        per_page: 3\r\n    }\r\n}\r\n\r\naxios.get(\'/api/users?page=1\', config).then(response => {console.log(response)}).catch(err => {console.log(err)});

\r\n

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

\r\n

\r\n

\r\n

\n\n

\n\n

因此，对于您的确切示例，正如我所说，将 axios.create 分配给一个变量，然后从中发出您的 .get 。

\n\n

var instance = axios.create({\n        baseURL: \'http://somebigurlhere\',\n        params: {\n            part: \'part\',\n            maxResults: 5,\n            key: \'key\'\n        }\n    });\n\n\ninstance.get(\'/search\', {\n    params: {\n        q: \'word\'\n    }\n});\n

\n\n

\n\n

更大的编辑\n此编辑显示了如何在我的答案中根据 OP 评论做出反应。演示 htis 的实际沙箱可以在这里找到： \n https://codesandbox.io/embed/cranky-aryabhata-2773d?fontsize=14 \n

\n\n

//axios_control.js 文件

\n\n

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

\n\n

\n\n

// index.js 文件\n记下 axios_control 的导入以及在渲染之前记录返回数据的用法。

\n\n

import React from "react";\nimport ReactDOM from "react-dom";\nimport { instance } from "./axios_control";\n\nimport "./styles.css";\n\nfunction App() {\n  instance.get("/api/users").then(response => {\n    console.log(response);\n  });\n\n  return (\n    <div className="App">\n      <h1>Hello CodeSandbox</h1>\n      <h2>Start editing to see some magic happen!</h2>\n    </div>\n  );\n}\n\nconst rootElement = document.getElementById("root");\nReactDOM.render(<App />, rootElement);\n

\n