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 钩子的写法

1. 也是直接写的哦
2. 所以注意名字不要敲错了,错了就理解成自定义函数了

  // **************生命周期 钩子
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

---

8.3 图示

1.png

---

参考资料

1.promise
2.TS语法-03
3.TS语法-04

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉