function promiseTest(n,msg) { return new Promise((resolve,reject)=>{ setTimeout(function () { console.log(`执行第${n}个任务`); msg.code && resolve(msg.text); // 当认为成功的时候,调用resolve函数 !msg.code && reject(msg.text); // 当认为失败的时候,调用reject函数 },n*500) }); } let pro = promiseTest(1,{code:true,text:"返回的数据1"}); /* 没有catch,每个then里两个回调函数,此时第一个为成功的回调,第二个为失败的回调 */ pro.then((data)=>{ console.log(data); // 执行成功结果在这里 // return promiseTest(2,{code:true,text:"返回的数据2"}); return promiseTest(2,{code:false,text:"失败的数据"}); },(err)=>{ console.log(err); // 执行失败的结果在这里 }).then((data)=>{console.log(data)},(err)=>{console.log(err)});
观察then和catch的用法:
/* 多个then和一个catch */ pro.then((data)=>{ console.log(data); return promiseTest(2,{code:false,text:"失败的数据"}); }).then((data)=>{ console.log(data) }).catch((err,data)=>{ console.log("失败了",err); });
all和rece的用法:
/* all的用法 */ Promise.all([ promiseTest(1,{code:true,text:"返回的数据1"}), promiseTest(2,{code:false,text:"返回的数据2"}), promiseTest(3,{code:false,text:"返回的数据3"}) ]).then((res)=>{console.log("全部成功",res)}).catch((err)=>{console.log("失败",err);}); /* race的用法 */ Promise.race([ promiseTest(1,{code:false,text:"返回的数据1"}), promiseTest(2,{code:false,text:"返回的数据2"}), promiseTest(3,{code:true,text:"返回的数据3"}) ]).then((res)=>{console.log("成功",res)}).catch((err)=>{console.log("失败",err);});
Generator是什么?叫做生成器,通过function*关键字来定义的函数称之为生成器函数(generator function),与Python的语法一模一样
生成器有3个方法,都有一样的返回值{value,done}
生成器的作用:
可以和 Promise 组合使用。减少代码量,写起来更方便。在没有Generator时,写Promise会需要很多的then,每个then内都有不同的处理逻辑。现在,我们将所有的逻辑写进一个生成器函数(或者在生成器函数内用yield 进行函数调用),Promise的每个then内调用同一个函数即可。
定义生成器:
function add(a,b) { console.log("+"); return a+b; } function cut(a,b) { console.log("-"); return a-b; } function mul(a,b) { console.log("*"); return a*b; } function division(a,b) { console.log("/"); return a/b; } function* compute(a, b) { yield add(a,b); yield cut(a,b); let value = yield mul(a,b); console.log("value",value); // 第三次调用.next()时无法为value赋值,需要第四次调用才能为其赋值 yield mul(a,b); yield division(a,b); }
使用生成器:
// 执行一下这个函数得到 Generator 实例,调用next()方法执行,遇到yield暂停 let generator = compute(4, 2); function promise() { return new Promise((resolve, reject) => { let res = generator.next(); if(res.value > 5) { resolve("OK"); }else { reject("小于5") } }); } let proObj = promise(); proObj.then((data)=>{ console.log(data); let res = generator.next(); console.log("Promise res1",res); }).then((data)=>{ let res = generator.next(); // let res = generator.return(); console.log("Promise res2",res); }).then((data)=>{ let res = generator.next("qwe"); // 第四次next()时,向生成器传数据 console.log("Promise res3",res) }).catch((err)=>{ console.log("出错",err); });
优点:简洁,节约了不少代码
如果在异步函数中,每个任务都需要上个任务的返回结果,可以这么做:
function takeLongTime(n) { return new Promise((resolve,reject) => { setTimeout(() => {resolve(n + 200)}, n); }); } function step1(n) { console.log(`step1 with ${n}`); return takeLongTime(n); } function step2(m, n) { console.log(`step2 with ${m} and ${n}`); return takeLongTime(m + n); } function step3(k, m, n) { console.log(`step3 with ${k}, ${m} and ${n}`); return takeLongTime(k + m + n); } async function doIt() { console.time("doIt"); const time1 = 300; const time2 = await step1(time1); const time3 = await step2(time1, time2); const result = await step3(time1, time2, time3); console.log(`result is ${result}`); console.timeEnd("doIt"); } doIt();
如果这几个任务没有关联,可以这样做:
async function doIt() { // 函数执行耗时2100ms console.time("doIt"); await step1(300).catch((err)=>{console.log(err)}); // 异常处理 await step1(800); await step1(1000); console.timeEnd("doIt"); } doIt();
当然,最好这样做:
async function doIt() { // 函数执行耗时1000ms console.time("doIt"); const time1Pro = step1(300); const time2Pro = step1(800); const time3Pro = step1(1000); await time1Pro; await time2Pro; await time3Pro; console.timeEnd("doIt"); } doIt();
注意:
原文:https://www.cnblogs.com/V587Chinese/p/11437051.html