在 axios 实例中传递查询字符串

在前端开发过程中，经常需要使用 Ajax 技术向后端服务器请求数据。对于一些需要传递参数的请求，通常会为其添加查询字符串（query string）参数。这种参数是以问号 ? 开头，后面跟上类似 key=value 的键值对形式进行传递的。

在使用 Axios 作为 Ajax 请求库时，我们可以通过其提供的 params 配置选项来添加查询字符串参数。

示例

以下示例展示了如何在 Axios 实例中传递查询字符串参数：

import axios from 'axios'

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://example.com/api/'
})

// 发送 GET 请求
instance.get('/data', {
  params: {
    page: 1,
    limit: 10
  }
})
  .then(response => console.log(response))
  .catch(error => console.log(error))

在上述示例中，我们首先使用 create 方法创建了一个 Axios 实例，并将请求的基础 URL 设置为 https://example.com/api/。接着，我们调用 get 方法发起了一个 GET 请求，传递了名为 page 和 limit 的查询字符串参数，其值分别为 1 和 10。

注意事项

需要注意的是，在传递查询字符串参数时，Axios 会自动将参数编码为 URL 安全的形式。如果需要手动编码参数，可以使用 encodeURIComponent 方法。

参考链接

• Axios 官方文档