promise理解和使用

1 Promise是什么

1. 抽象：是js中进行异步编程的新方案（旧方案就是纯回调）
2. 具体：
   从语法上说: 是一个构造函数；
   从功能上来说：promise对象用来封装异步操作并可以获取其结果；

2 为什么用Promise

1.指定回调函数的方式更加灵活；
旧的：必须在启动异步任务前
promise：启动异步任务 =>返回promise对象 =>给promise对象绑定回调函数（甚至可以在异步任务结束后指定）
2.支持链式调用，可以解决回调地狱问题
回调地狱：回调函数嵌套调用，外部回调函数异步执行结果是嵌套的回调函数执行的条件，
缺点：不便于阅读，不便于异常处理
解决方案：promise链式调用
终极解决方案：async/await

//回调地狱
dosomething(function(result)) {}

// 使用promise的链式调用解决回调地狱

// async/await 解决回调地狱的终极方案

3 怎么用Promise

见官方文档

4 promise关键问题

1. 如何改变状态：

• (1) resolve(value)：如果当前是pending就会变为resolve;
• (2) reject(reason): 如果当前是pending就会变为rejected；
• (3) 抛出异常：如果当前是pending就会变为rejected；

2. 一个promise指定多个成功/回调函数，都会调用么？
   当promise改变为对应状态时都会调用

const p = new Promise((resolve, reject) => {
resolve(1) // promise变为resolved状态
reject(2) // promise变为rejected失败状态
throw new Error("出错了") // 抛出异常，promise变为rejected失败状态，reason为抛出的error
throw 3 // 抛出异常， promise变为rejected失败装填，reason为抛出3
})

p.then(
value => {},
reason => {console.log('reason', reason)}
)

p.then(
value => {},
reason => {console.log('reason2', reason)} // 和上一个一起调用，先输出reason，再输出reason2
)

3. 改变promise状态和指定回调函数谁先谁后？
   (1)都有可能，正常情况下是先指定回调在改变状态， 但也可以先改状态再指定回调

// 常规：先指定回调函数，后改变状态
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1) // 后改变状态（同时指定数据），异步执行回调
}, 1000)}).then( // 先指定回调函数，保存当前指定的回调函数
value => {},
reason => {console.log('reason1', reason)} 
)

(2) 如何先改状态再指定回调？
- 在执行器中直接调用resolve()/reject()
- 延迟更长时间才调用then()

// 如何先改变状态，后指定回调函数（1）
new Promise((resolve, reject) => {
resolve(1) / 先改变状态（同时指定数据
}).then(   // 后指定回调函数，异步执行回调函数
value => {console.log('value2',value2)},
reason => {console.log('reason2', reason)} 
)

// 如何先改变状态，后指定回调函数（2）
const p =new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1) // 后改变状态（同时指定数据），异步执行回调
}, 1000)})

setTimeout(p.then(   // 后指定回调函数，异步执行回调函数
value => {console.log('value2',value2)},
reason => {console.log('reason2', reason)} 
), 1100)

(3) 什么时候才能得到数据？

• 如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据
• 如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据

4. promise.then()返回的新promise的结果状态由什么决定？

• 简单表达：由then()指定的回调函数执行的结果决定
• 详细表达：
  如果抛出异常，新promise变为rejected，reason为抛出的异常；
  如果返回的是非promise的任意值，新promise变为resolved，value为返回的值；
  如果返回的是另一个新promise，此promise的结果就会成为新promise的结果

5. promise如何串连多个操作任务？

• promise的then()返回一个新的promise，可以开成then()的链式调用
• 通过then的链式调用串连多个同步/异步任务

new Promise((resolve, reject) => {
	setTimeout(() > {
    	console.log(‘执行任务1（异步）')
    	resolve(1)
}, 1000)
}).then(
	value => {
    	console.log('任务1结果：’， value)
    	console.log('执行任务2（同步）’)
    	return 2
	}
).then(
   value => {
   	console.log('任务2结果：’， value)
   	return new Promise((resolve, reject) => {
   		setTimeout(() => {
   			console.log('执行任务3（异步）’)
   			resolve(3)
   		}, 1000)
   	})
   }
).then(
   value => {
   console.log('任务3的结果:',  value)
   }
)

// 结果
执行任务1（异步）'
任务1结果：1
执行任务2（同步）
任务2结果：2
执行任务3（异步）
任务3的结果: 3

6. promise异常穿透？

• 当使用promise的then链式调用时，可以在最后指定失败的回调；
• 前面任何操作出了异常，都会到最后失败的回调中处理；

new Promise((resolve, reject) => {
	resolve(1)
}).then(
	value => {
    	console.log('onResolved1()'， value)
    	return 2
	} 
	// 没写失败回调，相当于 reason => { throw error }
).then(
   value => {
   	console.log('onResolved2()'， value)
   }
   // 没写失败回调，相当于 reason => { throw error }
).then(
   value => {
   console.log('onResolved3()， value)
   }
   // 没写失败回调，相当于 reason => { throw error }
).catch(() => {
   // 一层一层，最终会走到这里，如果中间有异常处理，就不会走到这里
   console.log('onRejected()， value)
})

7. 中断promise链？

• 当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
• 办法：在回调函数中返回一个pending状态的promise对象

new Promise((resolve, reject) => {
	resolve(1)
}).then(
	value => {
    	console.log('onResolved1()'， value)
    	return 2
	} 
	// 没写失败回调，相当于 reason => { throw error }
).then(
   value => {
   console.log('onResolved3()， value)
   }
   return new Promise(() => {}) // 一直没有结果，promise状态一直为pending，就会中断后    面的回调了
).then(() => {
   console.log('onResolve()， value)
})