Axios 传递参数 - JavaScript

Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中进行数据请求。它提供了很多强大且易于使用的功能，其中之一是能够通过传递参数来自定义请求。

1. GET 请求传递参数

使用 Axios 的 get 方法发送 GET 请求时，可以通过在 URL 中添加查询参数来传递参数。这些查询参数必须以键值对的形式出现，并以 ? 开头。

以下是使用 Axios 发送 GET 请求并传递参数的示例代码：

axios.get('/api/users', {
  params: {
    name: 'John',
    age: 25
  }
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

上面的示例中，发送了一个 GET 请求到 /api/users 接口，传递了两个查询参数 name 和 age，分别为 'John' 和 25。在请求成功后，可以通过 response.data 获取服务器响应的数据。

2. POST 请求传递参数

使用 Axios 的 post 方法发送 POST 请求时，可以通过配置 data 属性来传递参数。这些参数将会作为请求的 body 数据发送到服务器。

以下是使用 Axios 发送 POST 请求并传递参数的示例代码：

axios.post('/api/users', {
  name: 'John',
  age: 25
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

上面的示例中，发送了一个 POST 请求到 /api/users 接口，传递了两个参数 name 和 age。在请求成功后，可以通过 response.data 获取服务器响应的数据。

3. 自定义请求头

除了传递参数，使用 Axios 还可以自定义请求头。通过设置 headers 属性，可以为每个请求添加自定义的请求头信息。

以下是使用 Axios 发送请求时自定义请求头的示例代码：

axios.get('/api/users', {
  headers: {
    'Authorization': 'Bearer your_token',
    'Content-Type': 'application/json'
  }
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

上面的示例中，使用 headers 属性定义了两个请求头，分别是 Authorization 和 Content-Type。这些请求头将会被添加到发送的请求中。

总结

通过传递参数和自定义请求头，使用 Axios 可以满足各种数据请求的需求。上述示例代码展示了如何在 GET 和 POST 请求中传递参数，以及如何自定义请求头。根据实际需求，可以灵活应用这些功能来完成多样化的数据请求任务。