深入浅出掌握 Axios(持续更新)

方法	用途	示例
`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、Mock 语法

db.json 的语法就是 标准的 JSON，关键在于结构的设计。记住：Key 是路径，数组里放对象，对象属性就是字段。

我们可以查看一下这篇博客快速学习https://juejin.cn/post/7464125372055126068

JSON 文件模拟：
JavaScript 对象模拟：
第三方库模拟：

新建一个文件，命名为 db.json。
按照上面的规则和例子，用 {} 定义顶级对象。
在里面写你的资源名（如 "books"），值写 []。
在 [] 里，写多个 {}，每个 {} 代表一条数据。
在每个 {} 里，用 "字段名": 值 的格式定义数据。
保存文件。
命令行运行：json-server --watch db.json --port 3000 (端口可选)。
打开浏览器访问 http://localhost:3000/你的资源名 (如 http://localhost:3000/books)，就能看到 Mock 的数据了！

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');

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);     // 状态码，如 200
    console.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()` 创建实例统一配置

vue的生命周期

很奇怪为什么在讲解axios的时候写上了vue的生命周期，其实了解了vue的生命周期对我们结合axios编写代码案例有很大的帮助

Vue 生命周期指的是组件从创建到销毁的过程，每个阶段都有对应的钩子函数（可执行代码）。

创建 -> 挂载 -> 更新 -> 销毁

在 Vue 项目中，Axios 是我们连接前端和后端的“数据快递员”。而要让快递准时送达、准确落地，就必须选对“投递时机”——这就是 Vue 生命周期的意义所在。

Vue 的组件就像一个人，从出生到工作、退休，有一整套流程。不同阶段能干的事不一样，而 Axios 发请求，也讲究“时机对、事半功倍”。

`1.created`：刚出生，正在准备“上场”

当组件执行到 created 阶段时，Vue 已经把 data() 和 methods 准备好了，数据能用，页面还没挂上。
这就像一个演员在后台化好妆、背好台词，还没走上舞台——这个时候你就可以请“快递员”（Axios）把“剧本”提前送过来。

用在什么场景？

获取用户信息
加载初始的商品列表、文章、评论数据
不需要用到 DOM 的场景

created() {
this.$axios.get('/api/user/info')
.then(res => {
this.userInfo = res.data;
});
}

提前拿到用户数据，等页面出来的时候就能一次性全部显示出来，流畅！

`mounted`：舞台灯亮了，演员登场！

mounted 是页面真正挂载到 DOM 上的时刻——你可以看见页面、操作 DOM 元素，这才是“正式演出”的开始。

用在什么场景？

页面尺寸、元素大小等 DOM 信息相关的数据请求
用户操作完某些元素后再加载的数据
验证码渲染、Canvas、图表初始化等要“看得见”的东西

项目里真实用法

mounted() {
this.randomCode(); // 页面渲染后生成验证码
}

什么时候该用哪个？

需求场景	推荐使用生命周期
页面一开始就需要的数据	created
要等页面元素挂载后再处理	mounted
完全不依赖页面结构的请求	created
要用 DOM 宽高、位置等信息	mounted

生命周期阶段	中文解释	你能做什么	举个例子（结合项目）
beforeCreate	数据还没初始化，什么都没有	几乎不怎么用	不能访问 `data()` 里面的内容
created	数据创建好了，但页面还没出来	可以提前处理数据、发请求	登录页面一开始就获取历史记录（比如自动填入用户名）
beforeMount	页面准备挂载，但内容还没显示	准备工作	用得少
mounted	页面已经显示在浏览器上了	最常用，访问页面元素、初始化	你用来生成验证码的 `randomCode()` 就写在这
beforeUpdate	页面要更新了（比如输入框刚变）	还没真正变化时做准备	记录旧密码、阻止某些自动更新
updated	页面更新完了	看页面改了什么，或再处理	输入验证码后，页面改了，你可以重新聚焦输入框
beforeDestroy	页面要被关闭、销毁了	清理资源、停止定时器	比如用户离开页面了，要取消轮询任务
destroyed	页面组件彻底没了	最后清理，没什么可做了	很少用，但可以做最终日志