Axios +查询字符串

Question

我想知道如何使用query-string npm包来简化axios调用。我使用的包是：https://www.npmjs.com/package/query-string

举个例子：

import qs from 'query-string';
import axios from 'axios';

axios.get(`http://localhost:3000/api/products${qs.parse({ offset: 0, limit: 12 })}`);

不知道为什么，但这并不像预期的那样工作。

Answer 1

你并不真的需要它。Axios有一个标准的方法来将参数放入你的请求中，而不需要任何额外的库或者手动做一些事情。

axios
    .request({
      url: '/some/url',
      method: 'get',
      params: {
        offset: 0,
        limit: 12,
        unknown: '???'
      },
      ...
    })

必须转换为/some/url?offset=0&limit=12&unknown=%3F%3F%3F。

Answer 2

由于不需要像axios那样使用query-string，因此可以通过将参数放入请求中自动执行该操作。

但是，如果您想使用query-string包，您可以通过这种方式来实现。

下面是一个简短的示例，它可以让您对使用查询字符串有所了解。

​

import qs from 'qs'; (https://www.npmjs.com/package/qs)
import axios from 'axios';

export default axios.create({
    baseURL: `http://localhost:3000/api/products`,
    params: (params) => {
        return qs.stringify(params, {offset: 0, limit: 12});
    },
});

​

Answer 3

Axios提供了另一种方便而强大的方式来将queryParams作为对象发送到http GET方法。

您可以这样更改您的请求：

axios.get('http://localhost:3000/api/products', {
    params: {
      offset: 0,
      limit: 12
    }
  })