网站建设大概要多少钱成人零基础学电脑培训班
在了解ajax和axios之前，我们先观察一下他们是什么英文的缩写
ajax 的名字为 asynchroanous JavaScript and XML
而axios的名称来源于英文单词“axis”与“I/O”的结合，并非直接缩写自某个特定短语。
先导知识
在本文我们简单的介绍一下ajax后着重讲解axios，在平时工作中因为ajax配置较为底层，代码相对冗长，所以我们使用更为现代化的axios
Axios是一个基于Promise的HTTP客户端库，专为浏览器和Node.js设计。其优势包括：
- 简洁的API设计，支持Promise链式调用。
- 自动转换JSON数据，拦截请求和响应。
- 提供取消请求、超时控制等高级功能。
到底什么是基于promise？请看一下博主的上一篇文章Javascript异步代码处理-CSDN博客
我们在这里简单的介绍一下：Promise是JavaScript中用于处理异步操作的编程构造。它表示一个异步操作的最终完成（成功或失败）及其结果值。最重要的是理解异步操作。
还有一个重点需要了解的是HTTP请求，此知识在各大网站均可搜到浅谈HTTP中Get、Post、Put与Delete的区别_联想如何跳过联网-CSDN博客，先确保自己了解清楚后再开始axios的学习。
在传统的网页开发中，每次我们点击一个链接或按钮跳转到另一个页面时，浏览器会重新加载整个页面。这个过程会出现短暂的白屏现象（页面内容完全空白），这是因为浏览器正在等待从服务器加载新的页面内容。
为了改善这种用户体验，开发者通常会尝试优化网络传输速度，比如压缩资源文件、使用缓存、开启CDN等方式来减少白屏时间。但无论我们怎么优化网络传输，总还会有一个过程是“清空页面 → 加载新页面”，这就不可避免地会出现白屏。
另外，传统的网页更新方式也存在一个效率问题：哪怕只需要更改页面上的一小部分内容，也必须整个页面重新加载。这不仅浪费资源，也让用户等待的时间变长。
在构建现代web项目的时候，前端与后端之间亲密的数据交互是重要的核心环节。而我们就是采用AJAX技术来实现这种数据交互的过程的。虽然浏览器本身已经提供了XMLHttpRequest和fetch()等等方式，但是他们或多或少存在复杂，兼容性不一等等的问题。
于是我们采用一个更强大，更友好，更灵活的AJAX封装库--Axios
在开始之前我们先了解如何引入axios在我们的项目中
如果你用的是前端构建工具（如 Vite、Webpack、Vue CLI）：
npm install axios 或者 yarn add axios
CDN 引入（适合纯 HTML 页面）：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
引入后，请你记住，我们引入axios的目的就是来实现异步请求的，异步就是异步，请求有很多种。
同步
在了解异步之前我们先学习一下什么是同步，我们并不举一些生活的例子，直接使用代码方面的解释什么是同步：代码按顺序一行一行执行，每一行都必须等上一行执行完成后才能继续执行下一行。
console.log('1');
console.log('2');
console.log('3');
代码输出结果只能是123，而不会是其他情况
异步
现在我们考虑一下异步，在异步模式中，某些操作不会立即完成（比如网络请求、定时器等），它们会先挂起或排队等待执行，程序会继续执行后面的代码，而不是等待异步操作完成。
console.log('开始模拟请求');
setTimeout(()=>{
console.log('请求中')
},2000)
console.log('请求已经发送');
考虑这段代码，按照我们初学者所想，输出结果就应该是 开始模拟请求->请求中->请求已经发送
但下面控制台输出结果并非如此。
关键就在于：setTimeout 是异步的。
-
当 JavaScript 执行到
setTimeout时，它不会等里面的代码执行完再往下走。 -
它会将回调函数（
console.log('请求中')）注册到“任务队列”中，然后继续执行后面的代码。 -
等到 定时器时间到了（这里是2秒），并且主线程空闲时，那个回调才会执行。
到这里我们已经理解了异步的核心思想
异步就是：你启动了一件任务，但不会等它完成才做下一件事。它不会“阻塞”后续代码的执行，而是“等你有空再处理这件事”。
Axios
上文讲到引入axios是完成异步请求的，我们异步已经搞明白了，现在我们来仔细分析一下请求
我们使用axios请求，其实是浏览器在背后通过HTTP协议向服务器发送请求并等待响应
包括以下两个核心部分：
请求(Request): 你告诉服务器我要什么
响应(Response)：服务器告诉你这是你要的内容
常见的请求类型（也叫“方法”）有这些：
| 方法 | 用途 | 示例 |
|---|---|---|
GET | 获取数据 | 获取文章、用户信息等 |
POST | 发送数据（新增） | 提交表单、注册用户等 |
PUT | 更新数据 | 修改用户资料等 |
PATCH | 部分更新数据 | 修改一个字段 |
DELETE | 删除数据 | 删除评论、记录等 |
我们现在用一个简单的文章小系统来了解Axios的基础用法(请注意我们不会把代码一股脑全考上来，也不会实打实就写代码，而是通过这个项目的流程来熟悉一下axios而已)
我们要构建一个简单的“文章管理系统”，包含以下功能：
-
获取文章列表
-
发布新文章
-
修改已有文章
-
删除文章
这些功能刚好对应 Axios 中最常用的四种请求方法：GET、POST、PUT、DELETE。
先说白了，get从哪里get，又post到哪里
-
get是从 服务器的某个接口（URL） 请求数据 -
post是把数据 发送到服务器的某个接口（URL）
而这个时候API接口文档就显得十分重要了
Restful API 接口规范详解-腾讯云开发者社区-腾讯云
我们可以使用 json-server 快速搭建本地 REST API
1. 安装 json-server
npm install -g json-server
2. 创建模拟数据 db.json
在你的项目根目录创建一个文件：db.json
3. 启动服务
json-server --watch db.json --port 3000
它会自动创建出一组 完整的 RESTful 接口：
| 功能 | 请求方法 | 地址 |
|---|---|---|
| 获取所有文章 | GET | http://localhost:3000/posts |
| 获取指定文章 | GET | http://localhost:3000/posts/1 |
| 添加文章 | POST | http://localhost:3000/posts |
| 修改文章 | PUT | http://localhost:3000/posts/1 |
| 删除文章 | DELETE | http://localhost:3000/posts/1 |
4. 示例代码：使用 Axios 测试
axios.get('http://localhost:3000/posts') // 获取文章 axios.post('http://localhost:3000/posts', { title: '测试文章', content: '这是一个模拟添加的文章' });
Axios基本语法学习/复习
了解基本语法之前我们需要学习headers、params，也就是请求头和请求体的内容
语法形式（通用）
axios(config)
axios({method: 'get', // 请求方法（get/post/put/delete）url: '/api/posts', // 请求地址params: { id: 1 }, // URL 查询参数（自动拼接成 ?id=1）data: { title: '标题' }, // 请求体数据（POST/PUT 用）headers: { 'X-Custom': 'value' }, // 自定义请求头timeout: 5000 // 超时设置（单位毫秒）
})
各方法语法和参数
1. axios.get(url, config)
-
url：请求地址
-
config：配置对象（headers、params 等）
axios.get('/api/posts', {params: { id: 1 },headers: { Authorization: 'Bearer token' }
});
2. axios.post(url, data, config)
-
url：请求地址
-
data：请求体（body）内容
-
config：附加配置
axios.post('/api/posts', {title: '新文章',content: '内容'
});
3. axios.put(url, data, config)
axios.put('/api/posts/1', {title: '修改标题'
});
4. axios.delete(url, config)
axios.delete('/api/posts/1');
5. axios.patch(url, data, config)
用于局部更新资源
axios.patch('/api/posts/1', {title: '只修改标题'
});
返回值：Axios 响应结构
Axios 所有请求都会返回一个 Promise，你可以用 .then() 处理返回值：
axios.get('/api/posts/1').then(response => {console.log(response.data); // 服务器返回的数据console.log(response.status); // 状态码，如 200console.log(response.headers); // 响应头console.log(response.config); // 请求配置信息}).catch(error => {console.error(error.response); // 错误响应对象});
Axios 特性汇总
| 特性 | 说明 |
|---|---|
| 基于 Promise | 支持链式调用、async/await 使用 |
| 自动 JSON 转换 | 自动将请求数据转为 JSON，也自动解析响应 JSON |
| 默认 GET 请求 | 默认 method 是 get，除非你设置为 post 等 |
| 跨浏览器兼容性强 | 能在所有主流浏览器中使用 |
| 支持请求/响应拦截器 | 可在请求发出前或收到响应后处理逻辑 |
| 取消请求 | 支持 CancelToken 取消请求 |
| 防止 XSRF 攻击 | 自动从 Cookie 获取 token 设置到请求头 |
| 统一配置 | 可通过 axios.create() 创建实例统一配置 |