用于客户端渲染的带有参数的 JavaScript Axios 请求

在开发 Web 应用程序时，我们通常需要与服务器进行数据交互。客户端渲染通常使用 Axios 库来发送 HTTP 请求并获取数据。

本篇文章将介绍如何使用带有参数的 Axios 请求来获取数据。

安装

可以使用 npm 或者 yarn 安装 Axios：

npm install axios
yarn add axios

示例

以下是一个简单的 Axios 请求示例，该请求仅在没有参数的情况下使用 GET 方法从服务器获取数据：

import axios from 'axios';

axios.get('/api/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

带有参数的 GET 请求

使用 Axios 进行带有参数的 GET 请求的方法如下：

axios.get('/api/data', {
  params: {
    id: 123,
    category: 'books',
  },
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

在此示例中，我们将两个参数 id 和 category 传递给 Axios 请求。这些参数将被序列化并添加到 URL 查询字符串中。

带有参数的 POST 请求

使用 Axios 进行带有参数的 POST 请求的方法如下：

axios.post('/api/data', {
  id: 123,
  category: 'books',
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

在此示例中，我们将两个参数 id 和 category 传递给 Axios 请求。这些参数将被序列化并包含在请求正文中。

URL

在 Axios 请求中，URL 可以是字符串或者 options 对象。

如果 URL 是字符串，则它将被视为请求的主机和路径。例如：

axios.get('/api/data')

如果 URL 是 options 对象，则可以设置以下属性：

• baseURL：用于请求的基本 URL。例如，如果您的 API 路由在 /api 下，则设置 baseURL 为 'https://example.com/api'。
• url：请求路径。覆盖原始 URL。
• method：请求方法。
• params：用于 GET 请求的查询参数。
• data：用于 POST 请求的数据。
• headers：请求标头。
• withCredentials：是否将凭据发送到服务器。
• responseType：服务器响应的数据类型。

以下是一个带有 options 对象的 Axios GET 请求示例：

axios({
  method: 'get',
  url: '/api/data',
  baseURL: 'https://example.com/api',
  params: {
    id: 123,
    category: 'books',
  },
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

参考链接

• Axios