js-review/js/Promise用法.js

117 lines
4.2 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// 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
// 当出现异常可以交给rejectreject会把错误交给之后的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);