Promise的示例

promise示例

new Promise(resolve => {
    console.log('promise1')
  resolve()
}).then(() => {
    console.log('then11')
  new Promise(resolve => {
      console.log('promise2')
    resolve()
  }).then(() => {
      console.log('then21')
  }).then(() => {
      console.log('then22')
  })
}).then(() => {
    console.log('then12')
})

过程分析：
1、同步代码执行过程中，外层promise实例的exector执行，并且同步修改其状态结果，另外通知then方法存放的方法执行，但是此时then还没有执行到，里面没有存放方法，所以只是修改状态结果
2、exector函数执行完成后，将then里面的方法存起来。此时promise实例1的状态已经是成功的了，所以微任务1是当同步代码执行完成后立即执行，而微任务2要等到微任务1中的代码执行完成后才会达到可执行状态。
同步代码执行完成后，此时任务队列中已经存放了微任务1和微任务2两个，微任务1的状态时可执行的。
3、执行微任务1，其中内层promise的exector同步执行，并且实例状态成功，存放微任务3[存放的时候状态应是可执行的，所以比微任务2先达到可执行状态]和微任务4[需要等到微任务3执行成功后才会执行]
微任务1的同步代码执行完成后，任务队列中的2和3都已经到了可执行状态，但是3比2要早达到，先执行3
4、执行微任务3完成后，微任务4达到可执行状态
5、执行微任务2
6、执行微任务4
如果是使用return new Promise的话，那么微任务2需要等到微任务4执行完成才达到可执行条件

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function (resolve) {
    console.log('promise1');
    resolve();
}).then(function () {
    console.log('promise2');
});
console.log('script end');

let body = document.body;
body.addEventListener('click', function () {
    Promise.resolve().then(() => {
        console.log(1);
    });
    console.log(2);
});
body.addEventListener('click', function () {
    Promise.resolve().then(() => {
        console.log(3);
    });
    console.log(4);
});

宏任务1执行的console的时候微任务1已经达到了可执行的状态了，所以先执行微任务1再执行宏任务2

console.log('start');
let intervalId;
Promise.resolve().then(() => {
    console.log('p1');
}).then(() => {
    console.log('p2');
});
setTimeout(() => {
    Promise.resolve().then(() => {
        console.log('p3');
    }).then(() => {
        console.log('p4');
    });
    intervalId = setInterval(() => {
        console.log('interval');
    }, 3000);
    console.log('timeout1');
}, 0);

setTimeout(() => {
    console.log('a');
});
Promise.resolve().then(() => {
    console.log('b');
}).then(() => {
    return Promise.resolve('c').then(data => {
        setTimeout(() => {
            console.log('d')
        });
        console.log('f');
        return data;
    });
}).then(data => {
    console.log(data);
});

function func1() {
    console.log('func1 start');
    return new Promise(resolve => {
        resolve('OK');
    });
}
function func2() {
    console.log('func2 start');
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('OK');
        }, 10);
    });
}
console.log(1);
setTimeout(async () => {
    console.log(2);
    await func1();
    console.log(3);
}, 20);
for (let i = 0; i < 90000000; i++) {}
//循环大约要进行80MS左右
console.log(4);
func1().then(result => {
    console.log(5);
});
func2().then(result => {
    console.log(6);
}); 
setTimeout(() => {
    console.log(7);
}, 0);
console.log(8);

async/await的示例

var resolveAfter2Seconds = function resolveAfter2Seconds() {
    console.log("starting slow promise");
    return new Promise(resolve => {
        setTimeout(function () {
            resolve("slow");
            console.log("slow promise is done");
        }, 2000);
    });
};
var resolveAfter1Second = function resolveAfter1Second() {
    console.log("starting fast promise");
    return new Promise(resolve => {
        setTimeout(function () {
            resolve("fast");
            console.log("fast promise is done");
        }, 1000);
    });
};
// sequential:相继的 /[sɪˈkwenʃl]/
var sequential = async function sequential() {
    console.log('==SEQUENTIAL START==');
    const slow = await resolveAfter2Seconds();
    console.log(slow);
    const fast = await resolveAfter1Second();
    console.log(fast);
};
// concurrent:同时发生的 /[kənˈkʌrənt]/
var concurrent = async function concurrent() {
    console.log('==CONCURRENT START with await==');
    const slow = resolveAfter2Seconds();
    const fast = resolveAfter1Second();
    console.log(await slow);
    console.log(await fast);
};
var concurrentPromise = function concurrentPromise() {
    console.log('==CONCURRENT START with Promise.all==');
    return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()])
        .then((messages) => {
            console.log(messages[0]);
            console.log(messages[1]);
        });
};
// parallel:平行的 /[ˈpærəlel]/
var parallel = async function parallel() {
    console.log('==PARALLEL with await Promise.all==');
    await Promise.all([
        (async () => {
            let result = await resolveAfter2Seconds();
            console.log(result);
        })(),
        (async () => {
            let result = await resolveAfter1Second();
            console.log(result);
        })(),
    ]);
};
var parallelPromise = function parallelPromise() {
    console.log('==PARALLEL with Promise.then==');
    resolveAfter2Seconds().then((message) => console.log(message));
    resolveAfter1Second().then((message) => console.log(message));
};

// 相继
sequential()

// 同时发生的
concurrent()

concurrentPromise()

// 平行的
parallel()