Vue.js教学第十七章：Vue 与后端交互（一），Axios 基础

Vue 与后端交互（一）：Axios 基础

在现代前端开发中，Vue 应用通常需要与后端 API 进行数据交互，以实现动态数据的获取和提交。Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于 Vue 项目中与后端进行通信。本文将深入讲解 Axios 的基本用法，包括如何通过 Axios 发送 GET、POST 等不同类型的 HTTP 请求，与后端 API 进行数据交互，以及 Axios 的配置选项和基本使用示例。

---

一、Axios 简介

（一）定义

Axios 是一个开源的 JavaScript 库，支持浏览器和 node.js，用于进行 HTTP 请求。它基于 Promise 设计，具有简洁易用的 API，支持请求和响应的拦截、请求取消、自动转换 JSON 数据等诸多实用功能。

（二）特点

• 基于 Promise ：Axios 的所有请求方法都返回 Promise 对象，使得异步操作可以链式调用，代码更加简洁易读。

• 拦截请求和响应 ：可以在请求发送前和响应返回后进行拦截处理，如添加认证头信息、处理全局的错误信息等。

• 转换请求和响应数据 ：自动转换 JSON 数据，也可以自定义数据转换规则。

• 取消请求 ：允许在请求发送后取消请求，节省资源。

• 支持多种环境 ：可以在浏览器和 node.js 中使用。

• 简洁的 API ：提供了易于使用的 API，简化了 HTTP 请求的发送和处理。

---

二、Axios 的安装

（一）通过 npm 安装

在 Vue 项目中，推荐通过 npm 安装 Axios：

npm install axios

（二）通过 CDN 引入

在 HTML 文件中通过 CDN 引入 Axios：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

---

三、Axios 基本用法

（一）发送 GET 请求

GET 请求用于从服务器获取资源。

// 基本 GET 请求
axios.get('https://api.example.com/users').then(response => {console.log(response.data); // 获取响应数据}).catch(error => {console.error('GET 请求失败:', error);});// 带参数的 GET 请求
axios.get('https://api.example.com/users', {params: {page: 1,limit: 10}}).then(response => {console.log(response.data);}).catch(error => {console.error('带参数 GET 请求失败:', error);});

（二）发送 POST 请求

POST 请求用于向服务器提交数据，通常用于创建新资源。

// 基本 POST 请求
axios.post('https://api.example.com/users', {name: 'John Doe',email: 'john@example.com',age: 30}).then(response => {console.log(response.data);}).catch(error => {console.error('POST 请求失败:', error);});// 设置请求头
axios.post('https://api.example.com/users', JSON.stringify({name: 'John Doe',email: 'john@example.com',age: 30}), {headers: {'Content-Type': 'application/json'}}).then(response => {console.log(response.data);}).catch(error => {console.error('带请求头 POST 请求失败:', error);});

（三）发送 PUT 请求

PUT 请求用于更新服务器上的现有资源。

axios.put('https://api.example.com/users/1', {