<script>
/*
1、同步回调
理解：立即执行，完全执行完了才结束，不会放入回调队列中
例子：数组遍历相关的回调函数 / Promise的excutor函数
2、异步回调
理解：不会立即执行，会放入回调队列中将来执行
例子：定时器回调 / ajax回调 / Promise的成功|失败的回调
*/
// 1、同步回调函数
const arr = [1, 3, 5];
arr.forEach(item => { //遍历回调，同步回调函数，不会放入队列中，一上来就执行完
console.log(item)
})
console.log('forEach()之后')
//异步回调函数
setTimeout(() => {//异步回调函数，会放入队列中将来执行
console.log('timeout callback()')
},0)
console.log('setTimeout()之后')
</script>
Promise的基本使用
<script>
//1、创建一个新的Promise对象
const p = new Promise((resolve,reject) => {//执行器函数，同步回调
console.log('这里先执行')
//2、执行异步操作任务
setTimeout(() => {//如果当前时间是偶数就代表成功，否则代表失败
const time = Date.now();
//3.1、如果成功了，调用resolve(value)
if(time % 2 == 0){
resolve('成功的数据，time=' + time)
}else{
//3.2、如果失败了，调用reject(reason)
reject('失败的数据，time=' + time)
}
},1000)
})
console.log('这里后执行')
p.then(
value => {//接受得到成功的value数据
console.log('成功的回调', value)
},
reason => {//接受得到失败的reason数据
console.log('失败的回调', reason)
}
)
</script>
<script>
/*
1、如何改变promise的状态
(1)resolve(value)：如果当前是pending就会变为resolved
(2)reject(value)：如果当前是pending就会变为rejected
(3)抛出异常：如果当前是pending就会变为rejected
2、一个promise指定多个成功/失败回调函数，都会调用吗？
当promise改变为对应状态时都会调用
*/
const p = new Promise((resolve, reject) => {
// throw new Error('出错了') //抛出异常，promise变为rejected失败状态，reason为抛出的error
throw new Error(3)
})
p.then(
value => {},
reason => {
console.log('reason=' + reason)
}
)
p.then(
value => {},
reason => {
console.log('reason2=' + reason)
}
)
</script>
<script>
/*
改变promise状态和指定回调函数谁先谁后？
(1)都有可能，正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调
(2)如何先改变状态再指定回调？
在执行器中直接调用resolve()/reject()
延迟更长时间才调用then()
(3)什么时候才能得到数据
如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据
如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据
*/
//常规：先指定回调函数，后改变的状态
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)//后改变的状态(同时指定数据)，异步执行回调函数
},1000)
}).then(//先指定回调函数，保存当前指定的回调函数
value => { },
reason => {
console.log('reason=' + reason)
}
)
//如何先改状态，后指定回调函数1
new Promise((resolve, reject) => {
resolve(1)//先改变的状态(同时指定数据)
}).then(//先指定回调函数，异步执行回调函数
value => {
console.log('value2=' + value)
},
reason => {
console.log('reason2=' + reason)
}
)
console.log('------------')
//如何先改状态，后指定回调函数2
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
},1000)
})
setTimeout(() => {
p.then(
value => {
console.log('value3=' + value)
},
reason => {
console.log('reason3=' + reason)
}
)
},1100)
</script>
<script>
/*
Promise.then()返回的新Promise的结果状态由什么决定？
(1)简单表达：由then()指定的回调函数执行的结果执行
(2)详细表述：
如果抛出异常，新Promise变为rejected，reason为抛出的异常
如果返回的是非promise的任意值，新promise变为resolved，value为返回的值
如果返回的是另一个新的Promise，此Promise的结果就会成为新promise的结果
*/
// new Promise((resolve, reject) =>{
// // resolve(1)
// reject(1)
// }).then(
// value => {
// console.log('onResolved1()',value)
// },
// reason => {
// console.log('onRejected1()',reason)
// }
// ).then(
// value => {
// console.log('onResolved2()',value)
// },
// reason => {
// console.log('onRejected2()',reason)
// }
// )
new Promise((resolve, reject) =>{
resolve(1)
// reject(1)
}).then(
value => {
console.log('onResolved1()',value)
// return 2
// return Promise.resolve(3)
// return Promise.reject(4)
throw 5
},
reason => {
console.log('onRejected1()',reason)
}
).then(
value => {
console.log('onResolved2()',value)
},
reason => {
console.log('onRejected2()',reason)
}
)
</script>
<script>
/*
Promise如何串联多个操作任务？
(1)promise的then()返回一个新的promise，可以看成then()的链式调用
(2)通过then的链式调用串联多个同步/异步任务
同步直接return，异步使用Promise封装
*/
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) => {
//启动异步任务3(异步)
setTimeout(() => {
console.log('执行任务3(异步)')
resolve(3)
},1000)
})
}
).then(
value => {
console.log('任务3的结果：',value)
}
)
</script>
<script>
/*
Promise异常穿透？
(1)当使用promise的then链式调用时，可以在最后指定失败的回调
(2)前面任何操作做出了异常，都会传到最后失败的回调中处理
中断promise链？
(1)当时用promise的then链式调用时，在中间中断，不再调用后面的回调函数
(2)办法：在回调函数中返回一个pending状态的promise对象
*/
</script>
