使用 Axios 进行数据请求

Axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求。它可以在浏览器和 Node.js 中使用，并且支持其他平台。在本文中，我们将介绍如何使用 Axios 进行 GET、POST 请求，并讨论拦截器的使用。

安装 Axios

要开始使用 Axios，首先需要将其安装到项目中。在终端执行以下命令：

npm install axios

发送 GET 请求

GET 请求用于从服务器获取数据。以下是使用 Axios 发送 GET 请求的示例代码：

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    // 数据请求成功
    console.log(response.data);
  })
  .catch(error => {
    // 发生错误
    console.error(error);
  });

上述代码中，我们使用 axios.get 方法发送一个 GET 请求到 /api/data。then 方法用于处理请求成功的响应，catch 方法用于处理发生的错误。我们可以通过 response.data 来访问响应的数据。

发送 POST 请求

POST 请求用于向服务器发送数据。以下是使用 Axios 发送 POST 请求的示例代码：

import axios from 'axios';

const data = {
  name: 'John Doe',
  age: 25
};

axios.post('/api/data', data)
  .then(response => {
    // 数据发送成功
    console.log(response.data);
  })
  .catch(error => {
    // 发生错误
    console.error(error);
  });

上述代码中，我们使用 axios.post 方法发送一个包含数据的 POST 请求到 /api/data。我们将数据对象传递给 axios.post 方法作为第二个参数。

拦截器

Axios 还提供了拦截器功能，允许我们在发送请求或接收响应之前对其进行处理。以下是一个使用拦截器的示例：

import axios from 'axios';

// 请求拦截器
axios.interceptors.request.use(request => {
  console.log('请求拦截器', request);
  // 可以在此处修改请求配置
  return request;
}, error => {
  console.error('请求拦截器发生错误', error);
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  console.log('响应拦截器', response);
  // 可以在此处修改响应数据
  return response;
}, error => {
  console.error('响应拦截器发生错误', error);
  return Promise.reject(error);
});

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

上述代码中，我们定义了一个请求拦截器和一个响应拦截器。拦截器函数接收请求或响应作为参数，并在处理完成后返回它们。我们可以在拦截器中修改请求配置或响应数据。

拦截器对于在发送请求之前或处理响应之前执行某些操作非常有用。比如，在请求之前添加身份验证令牌，或在响应中处理错误。

结论

Axios 是一款功能强大且易于使用的 HTTP 客户端库。在本文中，我们学习了如何使用 Axios 发送 GET、POST 请求，并了解了拦截器的用法。希望这篇文章对你有所帮助，快去尝试使用 Axios 进行数据请求吧！

参考链接：

• Axios GitHub
• Axios 中文文档