JavaScript-Promise介绍-三种状态
2021/4/25 20:28:49
本文主要是介绍JavaScript-Promise介绍-三种状态,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Promise介绍
- Promise是ES6引入的一个语法
- Promise是异步编程的一种解决方案
什么时候处理异步事件?
- 网络请求
- 我们封装一个网络请求的函数,因为不能立刻拿到结果
- 所以我们会传入另外一个函数,在数据请求成功时,将数据通过传入的而函数回调出去
- 如果只是一个简单地网络请求,那么这种方案不会给我们带来很大的麻烦
- 但是当网络请求太复杂时,就会出现回调地狱
回调地狱
- 我们通过一个url1从服务器加载一个数据data1,data1中包含了下一个请求url2
- 我们需要通过data1取出url2,从服务器加载数据data2,data2中包含了下一个请求url3
- 我们需要通过data2取出url3,从服务器加载数据data3,data3中包含了下一个请求url4
- 发送网络请求url4,获取最终的数据data4
上面代码有什么问题吗?
- 正常情况下没啥问题,正常运行
- 但是不容易维护
- 我们期望一种更加优雅的方式来进行这种异步操作
如何做呢?
- Promise可以以一种非常优雅的方式来解决这个问题
Promise基本使用
回调地狱 - - !
//Promise参数是一个函数 //resolve,reject本身又是函数 new Promise((resolve,reject)=>{ //异步操作 setTimeout(()=>{ console.log('hello world'); setTimeout(()=>{ console.log('hello promise'); setTimeout(()=>{ console.log('hello vue'); },1000) },1000) },1000) })
解决方法: 链式编程
//Promise参数是一个函数 //resolve,reject本身又是函数 new Promise((resolve,reject)=>{ //异步操作,第一次网络请求 setTimeout(()=>{ //第一次请求结果 console.log('hello world'); //再次请求 resolve() },1000) }).then(()=>{ //第二次网络请求 setTimeout(()=>{ //第二次请求结果 console.log('hello vue'); return new Promise((resolve,reject)=>{ //返回后再次请求 resolve() }) },1000) }).then(()=>{ //第三次网络请求 setTimeout(()=>{ //第三次请求结果 console.log('hello java'); },1000) })
当执行new Promise() 是,会执行构造函数,保存一些状态信息,执行传入的函数
在执行传入的回调函数是,会传入两个参数,resolve,reject,本身又是函数
new Promise((resolve,reject)=>{ setTimeout(()=>{ //get data resolve(data) //失败的时候调用reject reject('error message') },1000) }).then((data)=>{ //data处理代码 }).catch((err)=>{ //error处理代码 })
Promise三种状态
synchronization: 同步
asynchronization: 异步
- padding: 等待状态,比如正在网络请求,定时事件未到
- fulfill: 满足状态,请求到了,当我们主动回调了resolve时,就处于该状态,并且会回调then()
- reject: 拒绝状态,当我们主动回调reject时,就出于该状态,并且会回调cath()
new Promise((resolve,reject)=>{ setTimeout(()=>{ //resolve('hello,vuejs') reject('err message') },1000) }).then( (data) =>{ console.log(data); }, (err) => { console.log(err); } )
这篇关于JavaScript-Promise介绍-三种状态的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)