如何在 Vue 3 中轻松集成 Axios

2023-03-12 14:53:30

Axios：提升 Vue 3 HTTP 请求的利器

作为开发人员，我们经常需要与服务器进行数据交互，而 Axios 便是一款在 Vue 3 中进行 HTTP 请求的理想选择。它以其简单易用、功能强大而著称，让我们能够轻松、高效地与后端通信。

安装 Axios

安装 Axios 非常简单，只需使用 npm 或 yarn 包管理器：

npm install axios

然后在您的 Vue 3 项目中导入 Axios：

import axios from 'axios';

创建 Axios 实例

Axios 实例允许您管理 HTTP 请求的配置和默认选项，从而简化请求发送过程：

const axiosInstance = axios.create({
  baseURL: 'http://example.com/api',
  timeout: 10000,
});

发送 HTTP 请求

使用 Axios 实例，您可以轻松地发送各种 HTTP 请求：

GET 请求：获取资源

axiosInstance.get('/users')
  .then(response => {
    console.log(response.data);
  });

POST 请求：创建资源

axiosInstance.post('/users', { name: 'John Doe' })
  .then(response => {
    console.log(response.data);
  });

PUT 请求：更新资源

axiosInstance.put('/users/1', { name: 'Jane Doe' })
  .then(response => {
    console.log(response.data);
  });

DELETE 请求：删除资源

axiosInstance.delete('/users/1')
  .then(response => {
    console.log(response.data);
  });

处理响应数据

发送 HTTP 请求后，需要处理响应数据。Axios 提供了以下方法：

response.data：包含响应的主体数据
response.status：包含 HTTP 状态代码
response.headers：包含响应头信息

请求和响应拦截器

拦截器允许您在请求发送前或响应返回后执行自定义操作。这对于处理认证、日志记录或错误处理非常有用：

axiosInstance.interceptors.request.use(config => {
  // 在请求发送前做一些事情
  return config;
});

axiosInstance.interceptors.response.use(response => {
  // 在响应返回后做一些事情
  return response;
});

文件上传

Axios 还支持文件上传。您可以使用 FormData 对象将文件作为二进制数据发送到服务器：

const formData = new FormData();
formData.append('file', file);

axiosInstance.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});