快捷搜索:  汽车  科技

vue前端项目优化(VUE前端编程没搞懂promise)

vue前端项目优化(VUE前端编程没搞懂promise)getMemberInfoById:function(uri,id){ return new Promise((resolve reject)=>{ axios.get(uri id).then(response=>{ if(response.data.code=='SUCCESS'){ resolve(response.data.value);//成功时的传值 } }, error=>{ reject(error);//reject时的处理 }) }) }then会自动为我们构造新的promise对象,并把上级resolve和reject的返回对象传导到下级,利用then的这种特性我们可以很轻松的定义异步链。以我们常见的axios为例,对于axios的返回处理,

为什么说没搞懂promise/async/await之前不要写编码,因为p/a/a是javascript异步机制的基础性知识,在没搞懂之前处理异步问题将会事倍功半,使代码可读性,处置效率上大打折扣。

vue前端项目优化(VUE前端编程没搞懂promise)(1)

如何有效组织异步控制流

Promise

Javascript在之前,都是通过回调函数解决异步问题,在ES6中,则推出Promise机制来实现,传统的回调机制实现是:

// 函数定义 f1:function(parameter onSuccess onFailure){ some code; if( 成功条件达成){ onSucess(successData) } else{ onFailure(errorData) } } //函数调用 f1('hello' successData=>{ some code; } errorData=>{ some code; } }

用promise的写法如下,其逻辑意义是承诺后续按约定执行函数所定义的结构并按resolve和reject的置位触发事件。

//Promise定义 const promise = new Promise((resolve reject)=> { some code;//处理异步操作的代码 if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } });

Promise是一个对象,构造该对象时,构造器接受一个函数作为参数,该函数的有两个函数参数分别是resolve和reject,这里等同于我们定义回调方法onSuccess,onFailure,此时,它们在函数中起到占位作用。注意,在进行new操作时,some code对应的代码开始执行并将执行后续的同步代码,在所对应代码全部执行结束后,才会调用resolve或reject所对应的异步方法。

vue前端项目优化(VUE前端编程没搞懂promise)(2)

其后,我们可以通过Promise的then方法指定resolved状态和rejected状态的回调函数,这里会实际产生resovle和reject函数的调用事件。then一般会接受resolveHandler和rejectHander两个函数,如果不指定前者,就有一种特定的形式catch(rejectHandler)来代替t hen(null,rejectHander)。

promise.then((value)=> { // success code } function(error) { // failure code });

这里需要注意的是,如果要使用then方法,必须确保then之前的对象是Promise实例。到目前为止,这是Promise的最基础应用,介绍了Promise的工作机制。

以我们常见的axios为例,对于axios的返回处理,我们可以做如下的写法:

getMemberInfoById:function(uri,id){ return new Promise((resolve reject)=>{ axios.get(uri id).then(response=>{ if(response.data.code=='SUCCESS'){ resolve(response.data.value);//成功时的传值 } }, error=>{ reject(error);//reject时的处理 }) }) }

then会自动为我们构造新的promise对象,并把上级resolve和reject的返回对象传导到下级,利用then的这种特性我们可以很轻松的定义异步链。

f1.then(step1).then(step2).then(step3).then(step4)

这在分步骤进行异步处理的时候将非常有效,并有效的规避了回调地狱(Callback Hell),产生出自然易读的代码。

async/await

ES6在推出Promise解决异步流控制后,在ES7的版本中,提出了更好的异步流控制方案,即生成器(Generator) Promise。

生成器通过*和暂停点运算yield进行函数执行的打断/恢复操作,从而使我们在面对固定的函数执行序列时,有一定的生成能力,那async和await就是一种语法糖机制,async代替*,await代替yield。

vue前端项目优化(VUE前端编程没搞懂promise)(3)

那为什么说async/await是更好的异步控制方案呢?这里我们要知道,Promise是一种把函数回调或者thunk控制反转反转回来的一种机制。把promise的这种有效性和生成器的同步代码机制组合后或解决掉回调的所有重要缺陷。

async/await的用法如下:

async function getMemberById(id) { const member = await getMemberInfo(id); const memberLevel = await getMemberLevel(member.code); return {...member ...memberLevel}; } getMemberById('93020').then(function (result) { console.log(result); });

上例中,await会阻塞当前代码,等待对应的函数执行完毕后再继续执行,因此,在阅读习惯上,a/a更加自然,可读性更好。

以上是Promise/async/await的大致工作原理,感兴趣的朋友可以看一下阮一峰的ES6相关教程,写的更加细致。欢迎各位朋友多交流。

猜您喜欢: