使用Axios调用Xero API时查询参数未生效的问题排查

根据Xero API的发票查询规则，发票查询支持Statuses、page、summaryOnly等参数，ModifiedAfter需通过If-Modified-Since请求头传递。我编写的Axios请求代码如下：

const params = {
  'Statuses': 'AUTHORISED,PAID',
  'page': 1,
  'summaryOnly': false,
}
const config = {
  headers: { 'If-Modified-Since': '2015-01-01T00:00:00' }
}
instance.interceptors.request.use(request => {
  console.log('Starting Request', request)
  return request;
});
const response = await instance.get('Invoices', params, config);
const data = response.data;

但请求日志显示参数未被正确解析到请求URL中，日志内容如下：

{
  transitional: {
    silentJSONParsing: true,
    forcedJSONParsing: true,
    clarifyTimeoutError: false
  },
  ...
  headers: AxiosHeaders {
    Authorization: 'Bearer eyJhbGciOiJSUzI1NiIsImtpZC...',
    [Symbol(defaults)]: { Accept: 'application/json, text/plain, */*' }
  },
  baseURL: 'https://api.xero.com/api.xro/2.0/',
  Statuses: 'AUTHORISED,PAID',
  page: 1,
  summaryOnly: false,
  method: 'get',
  url: 'Invoices'
}

请问哪里操作错误，导致这些查询参数未生效？

错误原因 #

Axios的get方法参数格式用错了。Axios的get方法签名是get(url[, config])，第二个参数是配置对象，没有单独的params参数位置。你把params作为第二个参数传入，导致它被当成了配置的顶层属性，而不是URL查询参数的配置项，所以Axios不会把它解析到URL里。

修正后的代码 #

把params合并到config对象的params属性中即可：

const config = {
  params: {
    'Statuses': 'AUTHORISED,PAID',
    'page': 1,
    'summaryOnly': false,
  },
  headers: { 'If-Modified-Since': '2015-01-01T00:00:00' }
}
instance.interceptors.request.use(request => {
  console.log('Starting Request', request)
  return request;
});
const response = await instance.get('Invoices', config);
const data = response.data;

这样Axios会自动把params里的键值对解析成URL查询参数，拼接到请求URL后，最终的请求URL会变成类似https://api.xero.com/api.xro/2.0/Invoices?Statuses=AUTHORISED%2CPAID&page=1&summaryOnly=false的格式，参数就能正常生效了。

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