Axios与WebSocket的结合使用

# 1. 介绍 Axios 和 WebSocket

## 1.1 什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它具有以下特性：
- 从浏览器中创建 XMLHttpRequests；
- 从 node.js 创建 http 请求；
- 支持 Promise API；
- 拦截请求和响应；
- 转换请求和响应数据；
- 取消请求；
- 自动转换 JSON 数据；
- 客户端端，可以防止跨站请求伪造；

在前端开发中，Axios 可以用来发送异步请求到服务器并处理响应。

## 1.2 什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。通过 WebSocket，可以在客户端和服务器之间创建持久连接，实现双向的实时数据传输。

WebSocket 相对于传统的 HTTP 请求具有以下优势：
- 较少的通信开销；
- 支持全双工通信，可以实现服务器向客户端的推送；
- 较少的数据传输量；
- 更快的消息传递机制；

## 1.3 Axios 和 WebSocket 在前端开发中的作用

Axios 用于发送 HTTP 请求，可用于获取服务器端数据或向服务器端发送数据，适用于大多数常规的数据交互场景。

WebSocket 主要用于实时性要求较高的数据通信场景，比如在线聊天、实时数据更新等。其双向通信的特性，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。

结合使用 Axios 和 WebSocket 可以在前端实现更加高效、实时的数据通信与交互。

# 2. Axios 的基本用法

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它让在浏览器中发送异步 HTTP 请求变得更加简单和便捷。在本章中，我们将介绍 Axios 的基本用法，包括安装与配置、发送 GET 请求、发送 POST 请求以及处理 Axios 的响应。

### 2.1 Axios 的安装与配置

在使用 Axios 之前，需要先安装 Axios 包。在前端项目中，可以通过 CDN 或者 npm 安装 Axios。

// 通过CDN引入Axios
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

或者在 Node.js 环境中使用 npm 安装：

npm install axios

一旦安装成功，可以在项目中引入 Axios 并进行配置：

const axios = require('axios');

// 设置基础URL
axios.defaults.baseURL = 'https://api.example.com';

// 设置请求超时时间
axios.defaults.timeout = 5000;

### 2.2 发送 GET 请求

使用 Axios 发送 GET 请求非常简单，只需调用 axios.get() 方法并传入请求的URL即可：

axios.get('/user?id=123')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

### 2.3 发送 POST 请求

发送 POST 请求同样简单，使用 axios.post() 方法并传入URL和数据对象：

axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

### 2.4 处理 Axios 的响应

Axios 的请求返回一个 Promise 对象，可以使用 .then() 处理成功的响应，使用 .catch() 处理失败的响应。在响应中，常用的属性包括 data、status、statusText 等，可以根据实际情况进行处理。

通过本章的介绍，我们学习了如何使用 Axios 发送 GET 和 POST 请求，以及如何处理 Axios 的响应。Axios 的简洁易用使得前端的数据请求变得更加高效和便捷。

# 3. WebSocket 的基本用法

WebSocket 是一种在单个 TCP 连接上提供全双工通信信道的协议，通过 WebSocket，客户端与服务器之间可以进行实时的数据传输与通信，避免了 HTTP 的请求/响应模式。下面我们将介绍 WebSocket 的基本用法。

#### 3.1 WebSocket 的原理与优势

WebSocket 基于 TCP 协议，通过单个 TCP 连接实现客户端与服务器之间的实时双向