当前位置: 首页 > Web前端 > HTML5

JavaScript学习笔记Promise

时间:2023-04-05 16:59:23 HTML5

优秀程序员web前端培训分享JavaScript学习笔记Promise,promise是一种ES6语法Promise的意思是承诺,它在语法上解决了传统的多层回调嵌套问题回调函数·什么是回调函数?就是将函数A作为参数传递给函数B,在函数B中,调用函数a(cb){cb()}functionb(){console.log('我是函数b')}a(b)为什么我们需要回调函数吗?当我们执行一个异步行为时,我们需要在一个异步行为执行之后做一些事情。那么,我们就没有办法提前预知这个异步行为什么时候会完成我们只能使用一个回调函数来执行一个典型的定时器setTimeout(function(){console.log("Callbackfunctionexecuted")},2000)Callbackhell当一个回调函数嵌套一个回调函数时,就会有一个嵌套结构。当嵌套过多时,就会出现回调地狱。比如我们发送三个ajax请求。第一个正常发送。第二个请求需要第一个请求。结果中的某个值作为参数第三个请求需要第二个请求的结果中的某个值作为参数ajax({url:'我是第一个请求',success(res){//sendnow第二个请求ajax({url:'我是第二个请求',data:{a:res.a,b:res.b},success(res2){//第三个请求ajax({url:'我amthethirdrequest',data:{a:res2.a,b:res2.b},success(res3){console.log(res3)}})}})}})回调地狱,其实就是回调函数嵌套过多造成的。当代码变成这种结构后,就没法再维护了。所以我们要把代码写得更有艺术感和PROMISE。为了解决回调地狱,我们需要使用promise语法。语法:newPromise(function(resolve,reject){//resolve表示回调成功_//reject表示回调失败_}).then(function(res){_//成功的function_}).catch(function(err){_//failedfunction_})Promise是一种语法。我们的每一个异步事件在执行过程中都会有三种状态,执行中/成功/失败。因为它包含了一个成功的回调函数·所以我们可以使用promise来解决发送多个ajax的问题??newPromise(function(resolve,reject){ajax({url:'firstrequest',success(res){resolve(res)}})}).then(function(res){//准备发送第二个请求returnnewPromise(function(resolve,reject){ajax({url:'secondrequest',data:{a:res.a,b:res.b},success(res){resolve(res)}})})}).then(function(res){ajax({url:'第三个请求',data:{a:res.a,b:res.b},success(res){console.log(res)}})})这个时候,我们的代码就发生了很大的变化。它基本上是可维护的。但是对于一个程序员来说,这个样子是不够的。我们需要进一步简化代码。所以我们需要使用es7语法。它被称为async/awaitASYNC/AWAIT。async/await是一种es7语法。这种语法是最终的回调地狱解决方案语法:asyncfunctionfn(){constres=awaitpromiseobject}这是一个特殊的函数方法。它可以等待一个承诺对象。它可以使异步代码看起来像同步代码。只要是promier对象,那么我们就可以用async/await来写asyncfunctionfn(){constres=newPromise(function(resolve,reject){ajax({url:'firstaddress',success(res){resolve(res)}})})//res可以得到请求的结果constres2=newPromise(function(resolve,reject){ajax({url:'secondaddress',data:{a:res.a,b:res.b},success(res){resolve(res)}})})constres3=newPromise(function(resolve,reject){ajax({url:'第三个地址',data:{a:res2.a,b:res2.b},success(res){resolve(res)}})})//res3就是我们想要的结果console.log(res3)}这样的异步代码看起来像同步代码