CDN、Axios 封装
CDN 是什么？
CDN（Content Delivery Network）即内容分发网络，是一种通过网络互联的计算机系统，利用离用户的最近节点服务器来提供高效的内容传递服务。CDN 可以将内容快速传输到用户所在的地理位置，降低网站的访问延迟，提升用户体验。
Axios 是什么？
Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送异步 HTTP 请求。它可以用于执行 GET、POST、PUT、DELETE 等多种 HTTP 请求，提供了更加简洁的 API，易于使用和理解。
CDN 引入 Axios
在使用 Axios 之前，我们需要先在 HTML 文件中引入 Axios 的 CDN。通过在 <head> 标签中添加如下代码来引入 Axios：
<script src="
Axios 基本用法
Axios 提供了多种用于发送 HTTP 请求的方法，最常用的是 axios() 方法。以下是一个简单的 GET 请求示例：
axios.get('
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
在上述示例中，我们使用 axios.get() 方法发送一个 GET 请求，并通过 then() 方法和 catch() 方法处理响应或错误。
Axios 封装
为了更好地管理和组织 Axios 的请求，我们可以对其进行封装。以下是一个简单的封装示例：
// api.js
import axios from 'axios';
const api = axios.create({
baseURL: '
timeout: 5000,
});
export default api;
在上述示例中，我们通过 axios.create() 方法创建了一个名为 api 的 Axios 实例，并设置了基本的配置项，如请求的基础 URL 和超时时间。通过将该实例导出，我们可以在其他文件中直接使用它来发送请求。
// example.js
import api from './api';
api.get('data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
在上述示例中，我们在 example.js 文件中导入了 api 实例，并使用它发送了一个 GET 请求。
封装 Axios 可以使代码更加模块化和可维护，同时也可以提高代码的可复用性。
总结
通过 CDN 引入 Axios，并对其进行封装，我们可以更加方便地使用 Axios 发送 HTTP 请求。Axios 提供了丰富的 API，可以用于执行各种类型的请求，并且易于使用和理解。封装 Axios 可以使代码更加模块化、可维护和可复用。
表格
下面是 Axios 提供的一些常用方法：
| 方法 | 描述 |
|---|---|
axios() |
发送 HTTP 请求。 |
get() |
发送 GET 请求。 |
post() |
发送 POST 请求。 |
put() |
发送 PUT 请求。 |
delete() |
发送 DELETE 请求。 |
patch() |
发送 PATCH 请求。 |
head() |
发送 HEAD 请求。 |
options() |
发送 OPTIONS 请求。 |
旅行图
journey
title Axios 封装之旅
section CDN 引入
CDN->Axios: 引入
section Axios 基本用法
Axios->GET: 发送 GET 请求
GET-->Axios: 处理响应
Axios->then: 成功
then-->console.log: 打印响应数据
Axios->catch: 失败
catch-->console.log: 打印错误信息
section Axios 封装
Axios-->api.js: 创建名为 api 的实例
api.js-->example.js: 导入 api 实例
example.js->api: 使用 api 实例发送 GET 请求
api-->GET: 发送 GET 请求
GET-->api: 处理响应
api-->then: 成功
then-->console.log: 打印响应数据
api-->catch: 失败
