axios + 查询字符串

Question

我想知道如何使用查询字符串 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

为了使用模板文字，您需要使用反引号 ( ) 而不是普通引号。\n代码:

\n\n

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

\n\n

如果您不想使用反引号，则无法使用${}语法。\n只需像普通字符串插值一样进行即可。

\n\n

axios.get(\xe2\x80\x98http://localhost:3000/api/products'+qs.parse({ offset: 0, limit: 12 })});\n

\n