Promise到底是什么:
promise是一个对象,可以用来传递异步任务的消息。我们知道异步任务的执行时间和执行结果是无法预测的,但是在实际项目中我们想要在异步任务执行之前,就根据不同的执行结果做出相应的处理。所以这时候就需要Promise这个用于获取异步任务消息的对象。
使用场景:
处理异步任务。因为JS是单线程的,使用Promise可以将异步任务以同步的方式展现出来,避免了层层的回调函数。
Promise对象特点:
Promise对象三种状态:
Pending(进行中)、resolved(已完成)、Reject(已失败)。
只有异步任务的结果能唯一确定promise对象的状态。
并且,一旦状态改变了之后,就固定了,任何的操作都无法改变当前状态。
promise的构造函数接受一个函数作为参数。函数的两个参数分别是函数resolve和函数reject。
如果异步任务成功就用resolve方法将promise的状态从pending改为resolved,如果异步任务失败,就用reject改变Promise的状态,从pending改为rejected。
new Promise(resolve, reject)=>{
resolve();
reject();
}
// 一个Promise实例
const p = new Promise((resolve, reject)=>{
// do something
if(success){
resolve(results)
}else{
reject(err);
}
}).then((results)=>{
console.log(results);
}).catch((err)=>{
console.log(err);
})
上图是一个Promise实例。P是生成的Promise实例,一般字promise构造函数的内部会包裹一个异步函数。当实例生成之后,可以用then
方法分别指定异步函数成功或者失败的时候的回调函数。results就是异步任务成功时候的返回的结果,一般then的回调函数包括两个,第一个是resolve时候的回调函数,第二个是reject时候的回调函数,第二个参数可以省略。
Promise的方法:
p.then(
(results)={
}, (err)=>{
});
注意Promise新建之后会立刻执行,而then方法会在当前脚本所有同步任务执行完之后才会开始执行。
<script>
window.onload = ()=>{
// 创建3个异步任务
const pro1 = ()=>{
return new Promise((reject, resolve)=>{
setTimeout(()=>{
console.log('执行异步任务1');
resolve('异步任务1执行成功');
}, 2000);
});
}
</script>
我来仔细剥离一下这个上面的pro1;
- 最外层 const pro1 = ()=>{} 可以看出pro1是一个函数。
- 然后pro1这个函数的返回值是一个Promise对象。
- 这个promise对象是通过构造函数构造的,他的构造函数参数是一个函数,这个函数是:
(reject, resolve)=>{
setTimeout(()=>{
console.log('执行异步任务1');
resolve('异步任务1执行成功');
}, 2000);
} */
// 一般这个函数内部都会包裹一个异步任务
}
promise.all
异步函数(async/await)
用async包裹一个函数,可以把这个函数变成一个异步函数。但是也只是让这个函数具有异步特性,执行上还是同步执行的。
let fun1 = async ()=>{}
async函数的返回值
是一个Promise对象
async function foo() {
console.log(1);
return 3; // 等价于return Promise.resolve(3);
}
foo().then(console.log);
console.log(2); // result: 1 2 3
await
使用await可以暂停异步函数代码的执行。 await只能在async中使用 。
await和async一起使用的时候,起作用的其实只有await,因为只有async的话,他的执行和普通函数没有什么区别
async()=>{
// do a
await P
// do b
}
以上代码的执行顺序是,进入异步函数之后执行do a 遇到await则暂停异步任务的执行,等待await右侧的p执行完毕之后,恢复异步任务的执行,执行do b。一般情况下这个P是一个Promise
async function foo(){
console.log(2);
console.log(await Promise.resolve(8));
console.log(9);
}
async function bar(){
console.log(4);
console.log(await 6);
console.log(7);
}
console.log(1);
foo();
console.log(3);
bar();
console.log(5);
// result 1 2 3 4 5 6 7 8 9
感谢@冰溪bx的指正。 TC39 对 await 后面是期约的情况如何处理做过一次修改。修改后,本例中的 Promise.resolve(8)只会生成一个
异步任务。所以上例的输出顺序为:123458967