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

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', {

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