Vue3 使用 Ajax (Axios) 实现前后端交互

Vue3 使用 Ajax (Axios) 实现前后端交互

随着互联网技术的飞速发展，前端框架的使用越来越广泛。Vue 作为目前最流行的前端框架之一，其版本迭代更新也备受关注。Vue3 的推出，更是带来了诸多改进和优化。在 Vue3 中，实现前后端交互的方式与 Vue2 有所不同，本文将详细介绍如何在 Vue3 中使用 Ajax (Axios) 进行前后端交互。

1. 安装 Axios

在 Vue3 项目中，首先需要安装 Axios 库。Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 node.js 环境。以下是安装 Axios 的命令：

npm install axios

或者

yarn add axios

2. 创建 Axios 实例

在 Vue3 项目中，可以通过创建 Axios 实例来发送 HTTP 请求。以下是一个创建 Axios 实例的示例：

import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 10000 }); export default instance;

在上述代码中，baseURL是请求的基础 URL，timeout是请求超时时间。可以根据实际需求进行修改。

3. 发送 GET 请求

在 Vue3 中，可以使用 Axios 实例发送 GET 请求。以下是一个发送 GET 请求的示例：

// 获取文章列表 instance.get('/articles'