vue3+TS:如何用ts定义promise接口类型

已于 2023-07-19 11:20:19 修改
阅读量1.7k 收藏 8
点赞数 2
分类专栏： vue3 文章标签： vue.js 前端 typescript
于 2023-07-19 10:03:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74417967/article/details/131802125
版权

 

另外一种完整的写法：

上面是用泛型来实现复用公共接口类型，下面是用extends继承实现复用公共接口类型

图一，二是接口返回的的数据

 

 

 

 

下图是定义promise发请求返回值的类型

 

react + ts or vue + ts 通用axios封装的方法。
07-21
react + ts or vue + ts 通用axios封装的方法。 封装通用ts类型，封装通用requestMode.ts，统一存放api请求路径
vue3+vite+pinia+axios+mock+ElementPlus：登录，动态路由，存储，网络 js非ts纯前端
09-25
总的来说，这个项目是使用Vue3作为基础框架，结合Vite作为构建工具，用Pinia管理应用状态，axios负责网络请求，Mock提供模拟数据，Element Plus用于构建UI界面。这样的组合为开发者提供了一个高效、便捷的前端开发...
记录Vue3+TS 定义接口interface、ref、reactive的使用场景以及使用泛型的原因
MyBlog
06-17 6819
vue3+ts interface、ref、reactive、泛型使用场景
深入浅出 TypeScript 中的 Promise：类型安全的异步编程指南（附Babylon.js中使用Promise案例）
最新发布
ttod的博客
02-10 675
深入浅出 TypeScript 中的 Promise：类型安全的异步编程指南（附Babylon.js中使用Promise案例）
ts 如何定义Promise类型函数
小白前端
04-27 2658
【代码】ts 如何定义Promise类型函数。
5.TS中promise类型的使用
m0_56986233的博客
08-09 3004
TS中promise类型的使用
vue3+ts 请求接口收到返回结果，这样定义返回值类型
AYNGyang的博客
06-06 1786
【代码】vue3+ts 请求接口收到返回结果，这样定义返回值类型。
vue3+ts深入组件（一）Props
Asen-coder的博客
11-22 8338
一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute。
vue3+ts+uniapp小程序
weixin_68531033的博客
05-28 1084
1111111111111111111测试。
vue3.0+ts 封装axios
zy991315的博客
07-03 869
vue3.0+ts 封装axios
vue3+ts封装axios以及解决跨域问题
niulinbiao的博客
08-20 1089
前端请求后端数据时，会用到axios，但是如果不将axios封装好，会导致代码冗余求头能统一处理便于接口的统一管理解决回调地狱配置拦截器，给不同的实例配置不同的拦截器，支持以对象形式接受多个拦截器配置因此，在这里记录一下axios的封装过程。
如何创建一个vite+vue3+ts项目（小白必看）
蜗牛~~
06-15 2493
当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。
【TypeScript】定义Promise的返回值类型
qq_45587822的博客
06-10 8941
问题 如何在 Typescript 中定义 Promise 的返回值类型？ 描述 如图所示，可以看到 Promise 中，reslove() 方法传入的是 number 类型。但是，Typescript 感知到的类型却是 Promise<{}>。 const main = new Promise((reslove,reject)=>reslove(1);}); 解决方法 方法一 通过Promise的构造函数，声明返回值的泛值类型 const main = new Promise<n
VUE3+TS中Promise.all调用接口
m0_50666077的博客
04-17 713
/定义promises})})
【vue】promise中如何取到PromiseValue的值
lixiaobolv1的博客
03-15 1万+
1、接口返回数据格式 {"code":"200","message":"","data":{"total":1,"items":[{"id":2,"creator_name":"test","category":"测试分类","case_name":"测试list","api_url":"http://baidu.com","api_method":"POST","description":"","header_form":[{"enable":true,"header_key":null,"header_
promise与HttpClient结合实现接口请求
qq_40319828的博客
08-04 342
promise.service.ts httpGet(url, params) { var au=this.authenticationState return new Promise ((resove,reject) =>{ this.httpClient.get(url, { // @ts-ignore headers: this.httpOptions.he
vue3+ts项目中api接口的返回参数通过TS类型声明强校验
程序员林北北的博客
06-08 2818
typescript类型声明强校验
实现一个TS版，符合 Promise/A+规范的 Promise
zz_jesse的博客
02-27 1317
本文授权转载自：Col0ring，http://juejin.cn/post/6886360224308035598，主旨：本文使用 typescript，根据类型定义从零开始实现了一个 ...
【TypeScript】TS接口类型（三）
热门推荐
编码世界
12-26 1万+
我们经常说道的接口比如后端写了一个接口给前端调用，接口包括地址、参数、请求方式等等，参数规定了传参的类型。而在TS中的接口的定义是什么呢？顾名思义，它也是一种类型，和number、string、undefined等一样，约束使用者使用，主要是用来进一步定义对象中属性的类型。它是对行为模块的抽象，具体的行为是用类来实现。
vue3+ts如何定义接口提交数据封装类型
12-04
在 Vue3 中结合 TypeScript 使用，你可以通过定义接口 (Interface) 来明确组件内数据的结构，并将其作为函数参数的类型，表示数据应该如何提交。以下是基本步骤： 1. 首先，在 `types` 文件夹下创建一个 `.d.ts` 文件，比如 `data.d.ts`，用于声明数据接口。 ```typescript // data.d.ts interface FormData { field1: string; field2: number; // 根据需要添加更多的字段 } ``` 2. 然后，在 Vue 组件内部，当定义一个方法处理表单提交时，可以将这个接口作为方法的参数类型。 ```typescript import { Component } from &#39;vue&#39;; import { FormData } from &#39;./data&#39;; // 引入刚才定义的数据接口 @Component export default class MyComponent extends Vue { async submitFormData(formData: FormData): Promise<void> { try { // 这里发送实际的 API 请求，例如 axios 或者其他的 HTTP 客户端库 await this.$axios.post(&#39;/api/submit&#39;, formData); } catch (error) { console.error(&#39;Error submitting data:&#39;, error); } } // 其他组件方法... } ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值