vue的生命周期以及axios的使用 ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第8天。
一、生命周期？
组件从 创建 到 销毁 的整个过程就是生命周期
就是一个组件从创建开始经历了初始化，挂载，更新等步骤后，最后被销毁。
二、VUE的官方文档解释生命周期
三、钩子函数
目标: Vue框架内置函数，随着组件的生命周期阶段，自动执行
作用: 特定的时间点，执行特定的操作
场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
分类: 4大阶段8个方法
- 初始化
- 挂载
- 更新
- 销毁
| 阶段 | 方法名 | 方法名 |
|---|---|---|
| 初始化 | beforeCreate | created |
| 挂载 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 销毁 | beforeDestroy | destroyed |
四、axios的基本特点
- 支持客户端发送Ajax请求
- 支持服务端Node.js发送请求
- 支持Promise相关用法
- 支持请求和响应的拦截器功能
- 自动转换JSON数据
- axios 底层还是原生js实现, 内部通过Promise封装的
五、axios的基本使用
axios({
method: '请求方式', // get post
url: '请求地址',
data: { // 拼接到请求体的参数, post请求的参数
xxx: xxx,
},
params: { // 拼接到请求行的参数, get请求的参数
xxx: xxx
}
}).then(res => {
console.log(res.data) // 后台返回的结果
}).catch(err => {
console.log(err) // 后台报错返回
})
axios基本使用-全局配置
目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置
举例：
axios.defaults.baseURL = "http://123.57.109.30:3006"
// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
getAllFn() {
axios({
url: "/api/getbooks",
method: "GET", // 默认就是GET方式请求, 可以省略不写
}).then((res) => {
console.log(res);
});
// axios()-原地得到Promise对象
},
