网站首页 > 精选文章 正文
在我们实际中最常用到的是异步操作时,对异步操作进行封装,Promise 是一个函数返回的对象,我们可以在它上面绑定回调函数。
promise的简单使用
let p = new Promise((resolve,reject)=>{
//实现异步数据处理任务
//当处理成功时调用resolve方法
resolve("处理成功");
//当处理失败时调用reject方法
reject("处理失败");
});
p.then(result=>{
//从resolve得到正常结果
},function(error=>{
//从reject得到错误信息
});
从代码中我们可以看出Promise可以接受两个方法函数分别对应异步操作的结果,一个是成功后的回调一个是失败后的回调。
Promise常用的API
实例方法
new Promise 来创建对象
p.then()得到异步任务的正确结果
p.catch()获取异常信息
使用方式1
let p = new Promise((resolve,reject)=>{
//实现异步数据处理任务
//当处理成功时调用resolve方法
resolve("处理成功");
//当处理失败时调用reject方法
reject("处理失败");
});
p.then(result=> {
console.log(result);
})
.catch(error=> {
console.log(error);
})
使用方式2
let p = new Promise((resolve,reject)=>{
//实现异步数据处理任务
//当处理成功时调用resolve方法
resolve("处理成功");
//当处理失败时调用reject方法
reject("处理失败");
});
p.then(result=>{
console.log(result);
},
error=> {
console.log(error);
})
在这里说明一点就是当我们new Promise的时候,其实里面的处理逻辑是没有执行的,只有当调用then函数的时候才是处理逻辑执行的时候。
多个异步任务处理
1、Promise.all()方法
当处理并发多个异步任务,所有任务都执行完成才表示通过
let p1 = new Promise((resolve,reject)=>{
resolve("处理成功");
});
let p2 = new Promise((resolve,reject)=>{
resolve("处理成功");
});
let p3 = new Promise((resolve,reject)=>{
resolve("处理成功");
});
Promise.all([p1,p2,p3]).then((result)=>{
console.log(result);
})
这个时候只有p1、p2、p3同时调用resolve方法数据处理成功的时候,Promise.all方法才会代表执行通过。
2、Promise.race()方法
当处理并发多个异步任务,只要其中有一个任务完成就表示执行通过
let p1 = new Promise((resolve,reject)=>{
resolve("处理成功");
});
let p2 = new Promise((resolve,reject)=>{
resolve("处理成功");
});
let p3 = new Promise((resolve,reject)=>{
resolve("处理成功");
});
Promise.race([p1,p2,p3]).then((result)=>{
console.log(result);
})
这个时候只要p1、p2、p3中至少有一个调用resolve方法数据处理成功的时候,Promise.race方法就代表执行通过。
- 上一篇: 用上Vue3,你真的变了吗? vue3有人用吗
- 下一篇: 想解决vue的超大数据列表性能慢的问题?
猜你喜欢
- 2024-12-18 52、Vue 怎么实现跨域(必会) vue怎么实现跨域请求
- 2024-12-18 Vue 的响应式机制就是个“坑” vue 响应式布局如何实现
- 2024-12-18 想解决vue的超大数据列表性能慢的问题?
- 2024-12-18 用上Vue3,你真的变了吗? vue3有人用吗
- 2024-12-18 vue-cli-service不是内部或外部命令怎么解决?
- 2024-12-18 VUE业务中数据绑定无效-this.$set来帮忙
- 2024-12-18 vue组件内部动态渲染src,图片不显示的解决办法
- 2024-12-18 Vue3 环境下使用 uView UI 组件库问题及解决方案
- 2024-12-18 前后端数据交互(七)——前端跨域解决方案(全)
- 2024-12-18 vue组件间的九种通信方式 vue组件通信原理
- 最近发表
- 标签列表
-
- 向日葵无法连接服务器 (32)
- git.exe (33)
- vscode更新 (34)
- dev c (33)
- git ignore命令 (32)
- gitlab提交代码步骤 (37)
- java update (36)
- vue debug (34)
- vue blur (32)
- vscode导入vue项目 (33)
- vue chart (32)
- vue cms (32)
- 大雅数据库 (34)
- 技术迭代 (37)
- 同一局域网 (33)
- github拒绝连接 (33)
- vscode php插件 (32)
- vue注释快捷键 (32)
- linux ssr (33)
- 微端服务器 (35)
- 导航猫 (32)
- 获取当前时间年月日 (33)
- stp软件 (33)
- http下载文件 (33)
- linux bt下载 (33)