彻底搞懂Promise_html-js-css

Promise

手写Promise推荐
视频讲解（不是很全面，但是讲的不错）
文字讲解（较为全面）

从语法上说，Promise 是一个对象，从它可以获取异步 *** 作得到的消息。

console.log(
  typeof new Promise((r) => {
    r();
  })
); //>> 'object'

创建Promise对象

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve 和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（从 pending 变为 resolved），在异步 *** 作成功时调用，并将异步 *** 作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（从 pending 变为 rejected），在异步 *** 作失败时调用，并将异步 *** 作报出的错误，作为参数传递出去。

注：如果不传参，这个Promise对象就会一直保持pending状态。

let promise = new Promise(() => {});
promise.then((res) => console.log(res)); //没有输出

then

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});
// 相当于
promise.then(function(value) {
  // success
}).catch(function(error) {
  // failure
});

async

async返回一个Promise对象，可以使用then方法添加回调函数，函数执行时遇到await就暂停，直到执行完后面的异步函数然后再继续。

await

注：await命令只能用在async函数之中，如果用在普通函数，就会报错。

await可以接 Promise对象和原始类型的值（例如字符串’a’，会转换成立即resolved的Promise对象）。

如果接的是Promise对象，Promise成功状态的值会被返回，而失败状态的值要通过try…catch来处理。如果后面是一个thenable对象（即定义了then方法的对象），那么await会将其等同于 Promise 对象。相关题目

let promise1 = Promise.resolve()
    .then((res) => console.log(1))
    .then((res) => console.log(2));

let promise2 = new Promise((resolve) => {
    setTimeout(() => {
        console.log(6);
        resolve();
    });
}).then((res) => console.log(3));
async function main() {
    console.log(4);
    console.log(await Promise.all([promise2, promise1]));
    console.log(5);
    return {
        obj: 5,
    };
}
let promise3 = Promise.resolve()
    .then((res) => console.log(8))
    .then((res) => console.log(9));
console.log(typeof main());