1.前言
1.书接上文vue3 ts核心语法
2.这个主要是接口类型 和axios的用法
3.还有promise async wait
2. TS 中 生命周期的写法
既然是模拟请求,肯定要走钩子里面写
2.1 首先回顾下 TS当中data 的用法
是直接在组件写的
@Options({ props: { msg: String, }, }) export default class HelloWorld extends Vue { msg!: string; characters:string[] = ["类型注解","编译性的语言"] }
2.2 事件的写法
也是在组件中直接写的
addCharacter(e: KeyboardEvent) {}
2.3 钩子的写法
- 也是直接写的哦
- 所以注意名字不要敲错了,错了就理解成自定义函数了
// **************生命周期 钩子 created() { this.characters = [ { id: 1, name: "类型注解", selected: true }, { id: 2, name: "编译性的语言", selected: false }, ]; }
3. 接口类型定义
模拟 数据接口
// *********** 泛型 可以是接口 类 ,方法 非常广泛 的 interface Result<T> { ok: 0 | 1; data: T; } function getList<T>(): Result<T> { const data: any = [ { id: 1, name: "类型注解", selected: true }, { id: 2, name: "编译性的语言", selected: false }, ]; return{ ok: 1, data, }; }
4. 使用接口
4.1 核心代码
// **************生命周期 钩子 created() { this.characters = getList<SelectCharacter[]>().data }
4.2 拆解分析
1.我们知道数据返回的类型,所以这里注解下返回的类型
2.返回的不对,就会报错
5. promise模拟异步
5.1 接口修改
function getList<T>(): Promise<Result<T>> { const data: any = [ { id: 1, name: "类型注解", selected: true }, { id: 2, name: "编译性的语言", selected: false }, ]; return Promise.resolve({ ok: 1, data, }); }
5.2 简要分析
1.整个返回的结果用
Promise包裹一层2.最终的结果就像
ajax一样异步的,用Promise的resolve吐出去
6. 接口使用
6.1 简要代码
// **************生命周期 钩子 async created() { this.characters = (await getList<SelectCharacter[]>()).data }
6.2 写法2
async created() { getList<SelectCharacter[]>().then((result) => { this.characters = result.data; }); }
6.3 分析
1.其实这个
await和then一样 都是脱去Promise的一层壳2.因为我们在定义
getList的数据的时候里面是用resolve包裹一层的3.目前
await和async联合起来的用法在公司其实也比较常见4.整体还是
Promise的用法 脱壳
7. mock假数据
7.1 mock配置
vue.config.js
module.exports = { lintOnSave: false, devServer:{ open:true, before(app){ app.get("/api/list",(req,res)=>{ res.json( [ { id: 1, name: "类型注解", selected: true }, { id: 2, name: "编译性的语言", selected: false }, ]) }) } } }
7.2 重启
修改了这个
vue.config.js文件 需要重启
8 axios
8.1 环境
npm i axios 安装
在需要的文件引入
import Axios from "axios";
8.2 发请求
// **************生命周期 钩子 // 怎么用 直接写呗 async created() { Axios.get<SelectCharacter[]>("/api/list").then(res=>{ this.characters = res.data; }) }
async await写法
this.characters = (await Axios.get<SelectCharacter[]>("/api/list")).data
![K03Z{]EG$RW%Q7M9CO[J_33.png](https://ucc.alicdn.com/pic/developer-ecology/ee00c3b467d843088494b1fa0bab89bc.png?x-oss-process=image/resize,w_1400/format,webp "K03Z{]EG$RW%Q7M9CO[J_33.png")
