diff --git a/js/Promise用法.js b/js/Promise用法.js new file mode 100644 index 0000000..ed27f0f --- /dev/null +++ b/js/Promise用法.js @@ -0,0 +1,116 @@ +// Promise可用来处理异步代码的执行,无须再使用回调 +// 假设我们有这样一个需求,通过,getId()函数获取用户的id,之后通过getName()函数获取用户的name + + +// function getId(fn){ +// setTimeout(() => { +// fn(1) +// }, 1000) +// } + +// function getName(id, fn) { +// setTimeout(() => { +// if(id=1){ +// fn('小明') +// } else { +// fn('小红') +// } +// }, 1000); +// } + +// getId((msg)=>{ +// console.log('获取用户id成功,id为'+ msg); +// getName(msg, (msg)=>{ +// console.log('获取id为' + msg + '的用户,name 为:' + msg); +// }) +// }) + +// 如果我还要通过name查询地址,再通过地址查询周围设施,那么就形成了多层回调,使得代码难以阅读和理解 + + +// 使用Promise解决上述问题 +// new Promise((resolve)=>{ +// getId((msg)=>{resolve(msg)}) +// }).then(msg=>{ +// console.log('获取用户id成功,id为'+ msg); +// return new Promise((resolve)=>{ +// getName(msg,(name)=>{resolve(name)}) +// }) +// }).then((name)=>{ +// console.log('获取id为' + name + '的用户,name 为:' + name); +// }).catch(err=>{ +// console.log(err); +// }) + +// 上述代码看上去好像更复杂了,其实在实际开发中我们不需要自己new Promise的,会直接使用返回的Promise,在此基础上进行链式调用 + +// Promise的几种用法 +// 1. Promise可以使用new Promise来直接创建,参数为一个函数,接收两个参数resolve和reject,当异步代码执行完成之后可以把结果给resolve +// 当出现异常,可以交给reject,reject会把错误交给之后的then,或者最后的catch + +// new Promise(resolve=>{ +// // 此时还处于pending状态 +// resolve(1) // 调用resolve之后会处于resolve(确认状态)这个时候的参数会传递给下一个then,并且立马调用 +// }).then(res=>{ +// console.log(1); // 打赢Promise确认的值 +// return 1+1 // 返回的值会被包装成一个已经确定的Promise对象,相当于return Promise.resolve(1+1),此时这个值会被下一个.then接收到 +// }).then(res=>{ +// // 现在我们在此处抛出一个异常 +// console.log(res); +// throw new Error('这是一个认为制造的错误') +// }).then(res=>{ +// console.log(res); // 这行代码不会被调用,因为上一层的then返回的Promise是一个reject状态 +// }, err=>{ +// console.log(err.message); // 这行代码会执行,因为reject状态会触发,错误处理 +// return 3 // 处理错误之后,仍然可以返回一个Promise.resolve() +// }).then(res=>{ +// console.log(res); // 的确能接受到 +// throw new Error('第二个认为错误,不在。then中处理,会传递给最后一个 .catch') +// }).then(res=> +// console.log('这个.then没有做reject的处理') +// ). +// catch(err=>{ +// console.log(err.message); +// }) + +// 由上面的代码我们会发现一个问题,我们在实际开发中.then()只需传递一个参数就可以,作为promise.resolve +// 的接受,不要做错误处理,也不建议在这里面做错误处理,除非发生了嵌套,错误处理应该只在最后的.catch中处理,就算只写个.catch不做处理也可以 + +// Promise.all() ,接受一个由promise组成的可迭代对象 + +// let p1 = new Promise((resolve)=>{ +// resolve(1) +// }) + +// let p2 = new Promise((resolve)=>{ +// resolve(2) +// }) + +// let p3 = new Promise((resolve)=>{ +// resolve(3) +// }) + +// let p4 = Promise.reject(new Error('自定义错误')) + +// Promise.all([p1,p2,p3]).then(([p1,p2,p3])=>{ +// console.log([p1,p2,p3]); +// }) + +// Promise.all([p1,p2,p3, p4]).then(([p1,p2,p3, p4])=>{ +// console.log([p1,p2,p3, p4]); // 这里不会执行 +// }).catch(err=>{ +// console.log(err.message); // 由于有一个promise的状态为reject +// }) + +// Promise.allSettled 无论执行成功与否,都会返回一个成功的promise +// Promise.allSettled([p1,p2,p3,p4]).then(([p1,p2,p3,p4])=>{ +// console.log([p1,p2,p3, p4]); // 这里不会执行 +// }).catch(err=>{ +// console.log(err.message); // 由于有一个promise的状态为reject +// }) + +// Promise.any 只要里面的任意一个promise处理完成就返回它,如果都是拒绝的,那么才拒绝 +// Promise.any([p1, p2]).then(res=>{ +// console.log(res); +// }).catch(err=>{ +// console.log(err);