JS异步处理的进化史深入讲解(2)

Promise.all(iterable):谁执行得慢,以谁为准执行回调。返回一个promise对象,只有当iterable里面的所有promise对象成功后才会执行。一旦iterable里面有promise对象执行失败就触发该对象的失败。对象在触发成功后,会把一个包iterable里所有promise返回值的数组作为成功回调的返回值,顺序跟iterable的顺序保持一致;如果这个新的promise对象触发了失败状态,它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。

Promise.race(iterable): 谁执行得快,以谁为准执行回调。iterable参数里的任意一个子promise被成功或失败后,父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄,并返回该promise对象。

Promise.reject(err)与Promise.resolve(res)

Generators/yield

Generators是ES6提供的异步解决方案,其最大的特点就是可以控制函数的执行。可以理解成一个内部封装了很多状态的状态机,也是一个遍历器对象生成函数。Generator 函数的特征:

function关键字与函数名之间有一个星号;

函数体内部使用yield表达式,定义不同的内部状态;

通过yield暂停函数,next启动函数,每次返回的是yield表达式结果。next可以接受参数,从而实现在函数运行的不同阶段,可以从外部向内部注入不同的值。next返回一个包含value和done的对象,其中value表示迭代的值,后者表示迭代是否完成。

举个例子:

function* createIterator(x) { let y = yield (x+1) let z = 2*(yield(y/3)) return (x+y+z) } // generators可以像正常函数一样被调用,不同的是会返回一个 iterator let iterator = createIterator(4); console.log(iterator.next()); // {value:5,done:false} console.log(iterator.next()); // {value:NaN,done:false} console.log(iterator.next()); // {value:NaN,done:true} let iterator1 = createIterator(4);//返回一个iterator //next传参数 console.log(iterator1.next()); // {value:5,done:false} console.log(iterator1.next(12)); // {value:4,done:false} console.log(iterator1.next(15)); // {value:46,done:true}

代码分析:

当不参数时,next的value返回NaN;

当传参数时,作为上一个yeild的值,在第一次使用next时,传参数无效,只有第二次开始,才有效。

第一次执行next时,函数会被暂停在yeild(x+1),所以返回的是4+1=5;

第二次执行next时,传入的12为上一次yeild表达式的值,所以y=12,返回的是12/3=4;

第三次执行next时,传入的15为上一次yeild表达式的值,所以z=30,y=12;x=4,返回30+12+4=46

async/await

初入async/await

async/await在ES7提出,是目前在javascript异步处理的终极解决方案。

async 其本质是 Generator 函数的语法糖。相较于Generator放入改进如下:

内置执行器:Generator 函数的执行必须靠执行器,而async函数自带执行器。其调用方式与普通函数一模一样,不需要调next方法;

更好的语义:async表示定义异步函数,而await表示后面的表达式需要等待,相较于*和yeild更语义化;

更广的适用性:co模块约定,yield命令后面只能是Thunk函数或 Promise对象。而 async 函数的await命令后面则可以是Promise 或者 原始类型的值;

返回Promise:async 函数返回值是Promise对象,比 Generator函数返回的 Iterator对象方便,可以直接使用 then() 方法进行链式调用;

语法分析

async语法

用来定义异步函数,自动将函数转换为promise对象,可以使用then来添加回调,其内部return的值作为then回调的参数。

async function f(){ return "hello async"; } f().then((res) => { //通过then来添加回调且内部返回的res作为回调的参数 console.log(res); // hello async })

在异步函数的内部可以使用await,其返回的promise对象必须等到内部所以await命令后的promise对象执行完,才会发生状态变化即执行then回调。

const delay = function(timeout){ return new Promise(function(resolve){ return setTimeout(resolve, timeout); }); } async function f(){ await delay(1000); await delay(2000); return '完成'; } f().then(res => console.log(res));//需要等待3秒之后才会打印:完成

await即表示异步等待,用来暂停异步函数的执行,只能在异步函数和promise使用,且当使用在promise前面,表示等待promise完成并返回结果。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/272532cfdfdde3c5b8b8609cfe422ad4.html