promise简单例子

promise的一个简单例子

1. 代码展示

// 一般都是微任务先执行，然后再执行宏任务，但是在promise里面的宏任务函数，必须先执行完，才能往下执行
Promise.resolve('foo')
    .then(function (string) {
    	// 微任务1
        console.log(1);
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
            	// 宏任务（这个宏任务会提前执行）
                string += 'bar';
                resolve(string);
            }, 1);
        });
    })
    .then(function (string) {
    	// 微任务2
        console.log(2);
        setTimeout(function () {
        	// 宏任务
            string += 'baz';
            console.log('2', string);
        }, 1)
        return string;
    })
    .then(function (string) {
    	// 微任务3
        console.log(3);
        console.log('3', string);
    });

2. 打印输出：1，2，3，3 foobar, 2 foobarbaz
3. 逻辑梳理：
   1. 里面出现了3个then函数，在主执行栈执行过程中，会把then里面的函数作为微任务逐次添加到微任务队列中。
      如下 [ 微任务1, 微任务2, 微任务3]
   2. 在主执行栈执行完成后，逐次执行微任务队列中的每一个任务。
      1. 这时候首先会输出 1，然后生成一个实例化 promise 实例，当做结果返回。在promise中，如果返回一个promise对象，后边的then函数都是依赖于次对象的。所以后边的then都是依赖第一个微任务返回的promise
      2. 当第一个返回promise后，微任务2开始执行，此时输出 2，然后生成一个setTimeout宏任务，返回结果
      3. 接受到微任务2的结果后，微任务3开始执行，此时输出 3，然后输出 3 foobar
   3. 当微任务执行完成后，此时执行宏任务队列，这里面只有一个，就是当时微任务2执行时添加的setTimeout，这是输出2 foobarbaz。
4. 注意知识点：一般都是微任务先执行，然后再执行宏任务，但是在promise里面的宏任务函数，必须先执行完，才能往下执行