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