Vue3-TypeScript-接口-async-axios用法

简介: 1.书接上文vue3 ts核心语法2.这个主要是接口类型 和axios的用法3.还有promise async wait

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一样异步的,用Promiseresolve吐出去


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.其实这个  awaitthen一样 都是脱去 Promise的一层壳

2.因为我们在定义getList的数据的时候里面是用 resolve包裹一层的

3.目前awaitasync联合起来的用法在公司其实也比较常见

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 图示

K03Z{]EG$RW%Q7M9CO[J_33.png




相关文章
|
8天前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
16天前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
14 1
|
23天前
|
JavaScript
vue对axios封装
vue对axios封装
25 2
|
24天前
|
存储 JSON 自然语言处理
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
17 2
|
12天前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
14 0
|
14天前
|
应用服务中间件
前后端数据交互之axios的路径怎样找?axios的路径是那个,是你打开Tomcat之后,出现的路径+你项目写的接口路径
前后端数据交互之axios的路径怎样找?axios的路径是那个,是你打开Tomcat之后,出现的路径+你项目写的接口路径
|
16天前
|
JavaScript Java 索引
TypeScript(四)接口
TypeScript(四)接口
15 0
|
16天前
|
JavaScript API
TypeScript 项目中接口的统一管理
TypeScript 项目中接口的统一管理
14 0
|
16天前
|
JavaScript API
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
24 0
|
1月前
|
JavaScript 索引 前端开发
9.【TypeScript 教程】接口(Interface)
9.【TypeScript 教程】接口(Interface)
18 4