2020-04-13 03:58:10
Vue.js中函数的func().then()链式调用和Promise.resolve的用法解析
在Vue.js开发中会遇到异步调用的场景,但是有的时候我们需要等待异步完成再进行下一步,就会用到func().then()这样的方式,想使用这样的方式就得使用Promise,写这篇文章就是我在搜索的时候发现有的人写的并不对,有点误人子弟,所以我也写一下我的版本。
Promise是什么
我之前搜索的时候别人写的有点乱,那我就用大白话,一句进行解释:Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及该异步操作的结果值。
使用案例
我将使用ES6语法演示Promise的使用,场景设计为:函数func1是异步程序,但是需要func1执行成功以后再执行后续func2逻辑,演示:
function func1() {
return new Promise((resolve, reject) => {
//注:Promise实例只能通过resolve 或 reject 函数来返回,并用then()或者catch()获取
//不能在里面直接return ... 这样是获取不到Promise返回值的
//这里模拟异步动作,一般来说可以放置Ajax请求, 'func1-result'为请求成功后的返回结果
setTimeout(() => resolve('func1-result'), 1000)
})
}
//func1执行成功以后再执行后续func2逻辑
func1().then(response => {
//func1执行成功以后执行func2
func2();
}).catch (error => {
//func1执行失败,打印日志
console.log (error)
});
根据上面的案例,应该就理解Promise的用法了:
- Promise实例化时带有一个构造函数 executor,并接收 resolve 和 reject 两个参数的函数
- Promise构造函数执行时立即调用executor函数,并将 resolve 和 reject 两个函数作为参数传递给executor
- resolve 和 reject 函数被调用时,分别将Promise的状态改为fulfilled(完成) 或rejected(失败)
- 也就是说,executor 内部通常会执行一些异步操作,一旦异步操作执行完毕(可能成功/失败)
- 要么调用resolve函数来将Promise状态改成fulfilled,要么调用reject函数来将Promise状态改为rejected
- 如果在executor函数中抛出一个错误,即使没有调用reject,该Promise的状态也改为rejected
商业用途请联系作者获得授权。
版权声明:本文为博主「任霏」原创文章,遵循 CC BY-NC-SA 4.0 版权协议,转载请附上原文出处链接及本声明。
相关推荐
猜你还喜欢这些内容,不妨试试阅读一下评论与留言
以下内容均由网友提交发布,版权与真实性无法查证,请自行辨别。微信订阅号
扫码关注「任霏博客」微信订阅号内容标签
最新留言
- 你写得非常清晰明了,让我很容易理解你的观点。
- 感谢分享!拿走了~
- 您是说 UCClient 类接收来自Discuz的UCenter的消息吧,请求是来自 Discuz 的 UCenter吗?code 为 null 说明请求URL地址中没有 code 参数 (?code=xxx) ,确定是 UCenter 发起的请求吗?
- String code = request.getParameter("code"); code一直是null 这是为什么啊
- 你好,我想问一下如果是分析型的数据库要怎么制作docker镜像呢 是修改V008R003C002B0320版本号吗
- 可以的,我也正在开发分享的程序,可以邮件或群联系我都可以,关于页面里有联系方式:https://www.renfei.net/page/about 。
- 有破解软件的需要可以私下联系您吗?
- 您好,手机APP只是个客户端,用于数据呈现展示,数据均保存在服务器上,只留个APP没有任何用处,无能为力哦。
- 老哥 看你弄了这么多软件好厉害啊。 我有个软件 我买过几个小会员 没用几天 然后商家跑路了,软件服务器关闭了,连不上去 用不了。 你能做成一个打补丁版本可以本地用的么? 方便看下么?https://haodezhe.lanzouw.com/iD0f30h9joza 谢谢老哥!
- 您好,由于版权投诉和我国知识产权法的完善,我已经下架所有破解软件的下载链接了。
热文排行
- 生花妙笔信手来 – 基于 Amazon SageMaker 使用 Grounded-SAM 加速电商广告素材生成 [1]
- github.renfei.net 不再完整代理 Github 页面改为代理指定文件
- 优雅的源代码管理(三):本地优雅的使用 Git Rebase 变基
- 优雅的源代码管理(二):Git 的工作原理
- 优雅的源代码管理(一):版本控制系统 VCS(Version Control System)与软件配置管理 SCM(Software Configuration Management)
- ChatGPT 开发商 OpenAI 买下极品域名 AI.com
- 火爆的 AI 人工智能 ChatGPT 国内注册教程、使用方式和收费标准
- 解决 SpringCloud 中 bootstrap.yml 不识别 @activatedProperties@ 参数
- Cron表达式书写教程搞定Linux、Spring、Quartz的定时任务
- 阿里云香港可用区C发生史诗级故障