2022-03-09 Promise的构造函数是同步还是异步的?then()方法是同步还是异步的?

Promise构造与then方法的同步异步解析

原创已于 2023-01-02 19:19:17 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#promise #then #同步 #异步 #javascript

于 2022-03-09 22:19:36 首次发布

知识点同时被 2 个专栏收录

96 篇文章

订阅专栏

Promise

5 篇文章

订阅专栏

Promise构造函数是同步执行的，其executor函数内部可以处理异步操作。而then方法是异步的，它会被添加到微任务队列中，在当前任务执行完后按顺序执行。

文章目录

1.Promise的构造函数是同步的还是异步的?then()方法是同步还是异步的?

回答:Promise 构造函数是同步执行的，then 方法是异步执行的

示例1

var p1=new Promise(resolve=>{
    console.log(1);
    resolve(3);
});
p1.then(res=>{
    console.log("成功:",res);
});
console.log(2);
//执行结果 1 2 成功:3

2.什么是executor 函数?

Promise中的那个匿名函数:(resolve,reject)=>{},就是executor函数
Promise的本质是一个构造函数,Promise构造函数在执行时,会立即调用executor函数,
resolve和reject作为参数传递给executor,当resolve和reject被调用时,分别将Promise的状态改成fulfilled和rejected
在executor函数中调用resolve和reject时会分别触发then()和catch()方法设置的回调函数

3.在executor函数中处理一个异步操作

Promise是用来管理异步编程的,但它本身不是异步的
因此,new Promise的时候会立即执行executor函数
但是,一般来说,会在executor中处理一个异步操作

示例2

var p2 = new Promise(() => {
    setTimeout(() => {
        console.log(1);
    }, 1000);
    console.log(2);
});
console.log(3);
//输出结果:2 3 1

4.Promise 采用了回调函数延迟绑定技术，在执行 resolve 函数的时候，回调函数还没有绑定，那么只能推迟回调函数的执行。

示例3

let p3 = new Promise((resolve,reject)=>{
    console.log(1);
    resolve('a');
    console.log(2);
});
//then 设置成功或者失败后的处理方法
p3.then(res=>{
    // p 延迟绑定回调函数
    console.log('成功'+res);
},reason=>{
    console.log('失败'+reason);
});
console.log(3);
//输出结果:1  2  3  成功a

事件循环流程

new Promise 的时候先执行 executor 函数，打印出1、2，
Promise 在执行 resolve 时，触发微任务，还是继续往下执行同步任务，
执行 p.then 时，存储起来的两个函数（此时这两个函数还没有执行），然后打印出 3 ，
此时同步任务执行完成，最后执行刚才那个微任务，
从而执行 .then 中成功的函数。