如何结合使用axios.get的params与config？代码无法运行求助

嘿，看了你的代码，你是在axios的参数结构上踩坑啦！咱们先理清楚axios.get的正确调用方式：axios.get(url[, config]) —— 第二个参数本身就是完整的配置对象，它可以同时包含params、headers这些属性，不需要把config单独嵌套进去哦。

你的代码问题出在哪？ #

你原来的写法是把config作为第二个参数里的一个子属性传递：

let config = { 'headers': {'Authorization': 'JWT ' + this.$store.state.token} }
let f = 0
axios.get('http://localhost:8000/api/v1/f/', { 
  params: { page: f + 1 }, 
  config: this.config // 这里错了！axios不识别这个config子属性
})

axios根本不会读取这个嵌套的config属性，所以你的请求头Authorization根本没被带上，自然无法正常运行。

正确的两种写法 #

写法1：直接把params合并到config对象里 #

最直观的方式，把分页参数和请求头都放进同一个config对象：

let f = 0
let config = {
  headers: { 'Authorization': 'JWT ' + this.$store.state.token },
  params: { page: f + 1 } // 把params直接加进config
}
axios.get('http://localhost:8000/api/v1/f/', config)

写法2：用展开运算符合并已有config和params #

如果你的config是提前定义好的，不想修改它，可以用ES6的展开运算符把它和params合并成新的配置对象：

let config = { headers: {'Authorization': 'JWT ' + this.$store.state.token} }
let f = 0
axios.get('http://localhost:8000/api/v1/f/', {
  ...config, // 展开原有的headers配置
  params: { page: f + 1 } // 添加params参数
})

这样写之后，axios就能同时识别请求头和分页参数啦，你的请求应该就能正常工作了～

内容的提问来源于stack exchange，提问作者KitKit