回调函数分类
1.同步回调
理解:立即执行,完全执行完了才结束,不会放入回调队列中
例子:数组遍历相关的回调函数 / Promise的excutor函数
2.异步回调
理解:不会立即执行,会放入回调队列中将来执行
例子:定时器回调 / ajax回调 / Promise的成功|失败的回调
//1.同步回调函数
const arr = [1,3,5];
arr.forEach(item =>{//遍历回调
console.log(item);
})
console.log("forEach()之后")
上面代码运行结果如下
//2.异步回调
setTimeout(()=>{//异步回调函数,会放入队列中将来执行
console.log("timeout callback()");
},0)
console.log("setTimeout()之后");
上面代码运行结果如下
Promise的基本使用
看下面的代码
//1.创建一个Promise对象
const p = new Promise((resolve, reject) => {//执行器函数
//执行异步操作任务
setTimeout(() => {
const time = Date.now();
if(time % 2 == 0){
//成功调用resolve(value)
resolve("成功的数据,time"+time);
}else{
//失败调用reject(reason)
reject("失败的数据 time"+time);
}
}, 1000);
})
p.then(value=>{
//接收成功的数据
console.log(value);
},reason=>{
//接受失败的数据
console.log(reason);
})
Promise的API
Promise构造函数 Promise(excutor){}
1.excutor函数 执行器函数
2.resolve函数 内部定义成功时我们调用的函数 用value异步回调函数接收
3.reject函数 内部定义失败时我们调用的函数 用reason异步回调函数接收
4.Promise.all([p1,p2,p3]) 里面用数组储存了多个Promise的值,只有当里面所有的promise值都成功才会成功
5.Promise.race([p1,p2,p3]) 里面用数组存储了多个Promise的值,他的返回值是数组中最先完成的promise状态
6.Promise.prototype.then(onResolved,onRejected){}
onResolved函数:成功的回调 (value)=>{}
onRejected函数:失败的回调 (reason)=>{}
7.Promise.prototype.catch (onRejected)=>{}
onRejected函数:失败的回调 (reason)=>{}
Promise中几个问题
<script>
/*
1.如何改变Promise的状态
(1)resolve(value):如果当前时pendding就会变成resolved
(2)reject(reason):如果当前是pendding就会变成rejected
(3)抛出异常:如果当前pendding就会变成rejected
2.一个Promise执行多个成功/失败回调函数,都会调用
当promise改变对应状态都会调用
*/
const p = new Promise((reslove,reject) => {
//reslove(1)// promise变成resolved状态
//reject(2)// promise变成rejected状态
throw new Error('出错了')//抛出异常,promise变成rejected失败状态,reason为抛出的error
})
// console.log(p);
p.then(
value => {},
reason => {console.log(reason);}
)
</script>
代码运行结果
<script>
/*
3.改变promise状态和 指定回调函数谁先谁后
(1)都有可能,正常情况下事先指定回调在改变状态,但也可能先改状态后指定回调
(2)如何先改状态再指定回调?
①在执行器中直接调用resolve()/reject()
②延时更长时间在调用then()
(3)什么时候才能得到数据
①如果先指定的回调,那当状态发生改变时,回调函数就会调用,得到数据
②如果先改变状态,那当指定回调时,回调函数就会调用,得到数据
*/
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)//后改变状态(同时指定数据),异步执行回调函数
}, 1000);
}).then(//先指定回调函数,保存当前指定的回调函数
value => { },
reason => { console.log("reason" + reason); }
)
new Promise((resolve, reject) => {
resolve(2)//先改变状态(同时指定数据)
}).then(//后指定回调函数,,异步执行回调函数
value => {console.log("value2" + value); },
reason => { console.log("reason2" + reason); }
)
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(3)//先改变状态(同时指定数据)
}, 1000);
})
setTimeout(() => {
p.then(//后指定回调函数,,异步执行回调函数
value => { console.log("value3" + value);},
reason => { console.log("reason3" + reason); }
)
}, 1100);
</script>
运行结果如下
<script>
/*
4.promise.then()返回的新promise的结果状态由什么决定
(1)简单表达:由then()指定的回调函数执行结果决定
(2)详细表达
①如果抛出异常,新promsie变成rejcted,reason为抛出异常
②如果返回的是非promise的任意值,新promise变为resolved,value为返回的值
③如果返回的是另一个新的promise,此promise的结果会成为新promise的结果
*/
new Promise((resolve, reject) => {
resolve(1)
}).then(
value => {
console.log('onResolved1', value);
// return 3
return Promise.resolve("haha")
// return Promise.reject("出错了")
},
reason => {
console.log('onRejected1', reason);
}
).then(
value => {
console.log('onResolved2', value);
return Promise.reject('error')
},
reason => {
console.log('onRejected2', reason);
}
).then(
value => {
console.log('onResolved3', value);
},
reason => {
console.log('onRejected3', reason);
}
)
</script>
代码运行结果如下