一、Promise的基本使用

• Promise是一个构造函数，原型对象上有then、catch等方法。

• 在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor，这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject；

// 1.写法一：
new Promise((resolve, reject) => {
  console.log("这里的代码立即执行");
  resolve(); // 当执行resolve方式时，会立即执行then中的回调函数
  // reject(); // 当执行reject方法时， 会执行catch中的回调函数
  // resolve 与 reject只能执行一个
  // 返回的时Promise对象
})
  .then(() => {
    console.log("成功的回调");
  })
  .catch(() => {
    console.log("失败的回调");
  });

// 2.写法二：
const promise2 = new Promise((resolve, reject) => {
  console.log("这里的代码立即执行！");
  // resolve();
  reject();
});

promise2
  .then(() => {
    console.log("成功的回调"); //resolve()
  })
  .catch(() => {
    console.log("失败的回调"); //reject()
  });

二、Pormise的三种状态

Promise使用过程可以划分成三个状态：

• 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝；
  当执行executor中的代码时，处于该状态；
• 已兑现（fulfilled）: 意味着操作成功完成；
  执行了resolve时，处于该状态；
• 已拒绝（rejected）: 意味着操作失败；
  执行了reject时，处于该状态；

注意: Promise状态一旦确定下来, 那么就是不可更改的(锁定)

但是不会阻断后续代码执行，一般需要配合return使用

// 注意: Promise状态一旦确定下来, 那么就是不可更改的(锁定)
new Promise((resolve, reject) => {
  // pending状态: 待定/悬而未决的
  console.log("--------");
  reject(); // 处于rejected状态(已拒绝状态)
  resolve(); // 处于fulfilled状态(已敲定/兑现状态)
  console.log("++++++++++++");
}).then(
  (res) => {
    console.log("res:", res);
  },
  (err) => {
    console.log("err:", err);
  }
);

image.png

三、resolve的参数

1.传入普通的值或对象

如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数；

2.传入一个Promise

如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态;

3.传入实现了then的对象

如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据 then方法的结果来决定Promise的状态;

// 1.传入普通参数
const promise1 = new Promise((resolve, reject) => {
  console.log("这里的代码立即执行");
  resolve("传入字符串");
});
promise1.then((res) => {
  console.log(res);
});

// 2.传入Promise
const promise2 = new Promise((resolve, reject) => {
  console.log("aaaaaaaaaaaa");
  // 状态不是由这里决定的，而是由resolve中的Promise对象决定
  resolve(
    new Promise((resolve, reject) => {
      reject(); // 这里决定状态
    })
  );
});
promise2.then(
  (res) => {
    console.log(res); // 执行的不是这里的代码
  },
  (err) => {
    console.log("err", err); // 执行的是这里的代码
  }
);

// 3.传入实现了then的对象
const promise3 = new Promise((resolve, reject) => {
  console.log("asdf");
  const obj = {
    // 实现then方法，这个方法中也是resolve和reject参数
    then: (resolve, reject) => {
      reject("这里决定状态");
    },
  };
  resolve(obj); // 状态不是由这里决定，而是由传入的obj对象的then方法中的resolve和reject决定
});
promise3.then(
  (res) => {
    console.log("res", res);
  },
  (err) => {
    console.log("err", err); // err 这里决定状态  (执行这里的代码)
  }
);

四、Promise的实例方法

1.then方法

(1)then的参数

then方法是Promise对象上的一个方法：它其实是放在Promise的原型上的 Promise.prototype.then

then方法接受两个参数：

• resolve的回调函数：当状态变成fulfilled时会回调的函数；
• reject的回调函数：当状态变成reject时会回调的函数；

promise.then(
  (res) => {
    console.log("res", res);
  },
  (err) => {
    console.log("err", err);
  }
);
// 等价于
promise
  .then((res) => {
    console.log("res", res);
  })
  .catch((err) => {
    console.log("err", err);
  });

(2)then被多次调用

// then方法多次调用 : 当then被多次调用时，每一个then中的回调函数都会被执行
// 所以以下代码会执行 3 次
const promisea = new Promise((resolve, reject) => {
  resolve("aaaaaa");
});
promisea.then((res) => {
  console.log("res1:", res);
});
promisea.then((res) => {
  console.log("res2:", res);
});
promisea.then((res) => {
  console.log("res3:", res);
});

(3)then的返回值

• 返回一个普通值；
• 返回一个Promise；（最常用)
• 返回一个实现了then方法的对象(即thenable值)；

// then的返回值  then的返回值都是一个参数
// 1.返回一个普通值
// 当返回一个普通值时,这个普通值会被最为新new的Promise的resolve的参数,所以then返回的是一个Promise
const promisea = new Promise((resolve, reject) => {
  resolve("aaa");
});
promisea
  .then((res) => {
    // 这里的第一个then方法是promisea的then方法
    return "bbb"; // 相当于: new Promise((resolve,reject) => {resolve('aaa)}) 即这个普通值会被作为新的Promise的resolve值
  })
  .then((res) => {
    // 这里的第二个then是第二个Promise(即 new Promise((resolve,reject) => {resolve('aaa)}) )的then方法,而不是promisea的then方法
    console.log(res); // bbb
    // 当然这里还可以有返回值
  });

// 2.返回值是一个Promise对象时
const promiseb = new Promise((resolve, reject) => {
  resolve("aaa");
});
promiseb
  .then((res) => {
    // 这里的then方法是promiseb的then方法
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("bbb");
      }, 3000);
    });
  })
  .then((res) => {
    // 这里的then也是new的新的Promise的then方法,而不是promiseb的
    console.log(res); // 三秒后输出  bbb
  });

// 3.当返回值是一个实现了then方法的对象时
const promisec = new Promise((resolve, reject) => {
  resolve("aaa");
});
promiseb
  .then((res) => {
    // 这里的then方法是promiseb的then方法
    const obj = {
      then: function (resolve, reject) {
        resolve("bbb");
      },
    };
    return obj; // 新的promise的状态有obj对象里的resolve或reject决定
  })
  .then((res) => {
    console.log(res); // bbb
  });

2.catch方法

catch方法也是Promise对象上的一个方法：它也是放在Promise的原型上的 Promise.prototype.catch。

(1)catch的基本使用

const promiseb = new Promise((resolve, reject) => {
  // reject("promiseb")
  resolve("resolve");
});
promiseb
  .then((resolve) => {
    console.log("resolve");
    return new Promise((resolve, reject) => {
      reject("新的promise");
    });
  })
  .catch((err) => {
    // 这里的catch 首先 对应的是promiseb的reject，而不是then后新的promise，但当promiseb调用的是reject时，如果then中新的promise调用了reject，会执行这里的catch
    console.log(err);
  });

(2)catch被多次调用

当某个promise对象有多个catch，调用reject或抛出异常时，每一个catch都会被执行。

const promisea = new Promise((resolve, reject) => {
    // 当调用reject或抛出异常时，都会执行then中的错误捕获的方法
    throw new Error("错误");
    // reject();
  });
  promisea.then(undefined, (error) => {
    console.log("err", error);
  });
  // catch相当于then的错误的捕获的语法糖
  // 当有promisea有多个catch时，每一个都会被执行调用
  promisea.catch(() => {
    console.log("相当于时then错误捕获的语法糖");
  });
  promisea.catch(() => {
    console.log("相当于时then错误捕获的语法糖");
  });
  promisea.catch(() => {
    console.log("相当于时then错误捕获的语法糖");
  });

(3)catch的返回值

和then返回值一样，返回的都是promise。

const promisec = new Promise((resolve, reject) => {
  // resolve("promisec")
  reject("promisec");
});

promisec
  .then((resolve) => {
    console.log("promisec：", resolve);
  })
  .catch((err) => {
    console.log("err:", err);
    return "catch"; // 这里和then的返回值一样，会生成新的Promise，如果新的Promise中调用resolve则会执行下一个then方法，如果调用reject则会执行catch方法
  })
  .then((resolve) => {
    console.log("new Promise:", resolve); // new Promise: catch
  })
  .catch((err) => {
    console.log("err:", err);
  });

3.finally方法

finally是在ES9中新增的一个特性：表示无论Promise对象无论变成fulfilled还是reject状态，最终都会 被执行的代码。

const promised = new Promise((resolve, reject) => {
  resolve("resovle");
});
promised
  .then((resovle) => {
    console.log(resovle);
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    console.log("最终都会执行");
  });

五、Promise的类方法

1.resolve方法

then、catch、finally都是promise的实例方法，resolve是promise的类方法。

resolve的参数：

• 普通值；
• promise
• thenable

Promise.resolve("tjx");
// 等价于
const promisee = new Promise((resolve, reject) => {
  resolve("tjx");
});

// promise可以传入三种参数：1.普通的参数 2.promise 3.实现了then方法的对象
// 1.普通参数
const promisep = Promise.resolve("adf");
promisep
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((err) => {
    console.log(err);
  });
// 2.promise
const promisepro = Promise.resolve(
  new Promise((resolve, reject) => {
    resolve("sfa");
  })
);
promisepro
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((err) => {
    console.log(err);
  });
// 3.thenable
const promiseable = Promise.resolve({
  then: function (resolve, reject) {
    resolve();
  },
});
promiseable
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((err) => {
    console.log(err);
  });

2.reject方法

reject方法类似于resolve方法，只是会将Promise对象的状态设置为reject状态;

Promise.reject传入的参数无论是什么形态，都会直接作为reject状态的参数传递到catch的。

Promise.reject("reject");
// 相当于
const promisez = new Promise((resolve, reject) => {
  reject("reject");
});

// reject的参数无论是什么都只是修改promise的reject状态并把这个参数传递过去
const promisex = Promise.reject(
  new Promise((resolve, reject) => {
    resolve("resovle");
  })
);
promisex
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((err) => {
    console.log(err); // promise对象
  });

3.all方法

all方法也是promise的类方法，他的作用是将多个Promise包裹在一起形成一个新的Promise；

新的Promise状态由包裹的所有Promise共同决定：

• 当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值 组成一个数组；
• 当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数；

const promise1 = new Promise((resolve, reject) => {
  resolve("1");
});
const promise2 = new Promise((resolve, reject) => {
  resolve("2");
});
const promise3 = new Promise((resolve, reject) => {
  // resolve("3")
  reject("err");
});
Promise.all([promise1, promise2, promise3, "这里也可以是其他类型参数"])
  .then((resolve) => {
    console.log(
      "当all参数中所有的promise的resolve时，执行这里的函数，resolve：",
      resolve
    ); // 当all参数中所有的promise的resolve时，执行这里的函数，resolve： [ '1', '2', '3', '这里也可以是其他类型参数' ]
  })
  .catch((err) => {
    console.log(
      "当all的参数中所有的promise中有一个reject时，就执行这里的代码就，error：",
      err
    ); // 当all的参数中所有的promise中有一个reject时，就执行这里的代码就，error： err
  });

4.allSettled方法

all方法有一个缺陷：当有其中一个Promise变成reject状态时，新Promise就会立即变成对应的rejected状态。 那么对于resolved的，以及依然处于pending状态的Promise，我们是获取不到对应的结果的；

在ES11中，添加了新的API Promise.allSettled： 该方法会在所有的Promise都有结果（settled），无论是fulfilled，还是rejected时，才会有最终的状态； 并且这个Promise的结果一定是fulfilled的；

const promise4 = new Promise((resolve, reject) => {
  resolve("1");
});
const promise5 = new Promise((resolve, reject) => {
  resolve("2");
});
const promise6 = new Promise((resolve, reject) => {
  // resolve("3")
  reject("err");
});
Promise.allSettled([promise4, promise5, promise6])
  .then((resolve) => {
    console.log(resolve); // 输出为：
    // [
    //   { status: 'fulfilled', value: '1' },
    //   { status: 'fulfilled', value: '2' },
    //   { status: 'rejected', reason: 'err' }
    // ]
  })
  .catch((err) => {
    console.log(err); // 只会进入成功的回调，不会进入这里失败的回调
  });

5.race方法

如果有一个Promise有了结果，我们就希望决定最终新Promise的状态，那么可以使用race方法：

race是竞技、竞赛的意思，表示多个Promise相互竞争，谁先有结果，那么就使用谁的结果；

const promise7 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("7");
  }, 3000);
});
const promise8 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("8");
  }, 1000);
});
const promise9 = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve("9")
    reject("err");
  }, 500);
});
Promise.race([promise7, promise8, promise9])
  .then((resolve) => {
    console.log(resolve); // 返回接收到的第一个resolve，如果是reject则执行catch中的代码
  })
  .catch((err) => {
    console.log(err);
  });

6.any方法

any方法是ES12中新增的方法，和race方法是类似的：
any方法会等到一个fulfilled状态，才会决定新Promise的状态；
如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态，然后再执行catch中的代码，那么会报一个AggregateError的错误；

const promise10 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("7");
  }, 3000);
});
const promise11 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("8");
  }, 1000);
});
const promise12 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("err");
  }, 500);
});
Promise.any([promise10, promise11, promise12])
  .then((resolve) => {
    console.log(resolve); //
  })
  .catch((err) => {
    console.log(err);
  });
// 首先出现的是err，但是是reject，所以继续等待第一个resolve，出现了第一个resolve就执行then中代码，如果全是reject，则会等到所有的reject只会再执行reject，然后报一个错

六、async

1.异步函数 async

async关键字用于声明一个异步函数。

异步函数的返回值是promise。

// 写法一
async function foo() {}
// 写法二
const foo2 = async function () {};
// 写法三
const foo3 = async () => {};
// 写法四
class Person {
  async foo() {}
}

2.异步函数执行流程

异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。

异步函数有返回值时，和普通函数会有区别：

• 情况一：异步函数也可以有返回值，但是异步函数的返回值会被包裹到Promise.resolve中；
• 情况二：如果我们的异步函数的返回值是Promise，Promise.resolve的状态会由Promise决定；
• 情况三：如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定；
  如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递；

// 异步函数与普通函数的区别--返回值
async function foo() {
  console.log("foo function start-");
  console.log("中间件");
  console.log("foo function end-");

  // 1.返回一个值，这个值作为新的promise的resolve的参数

  // 返回thenable
  // return {
  //   then: function(resolve, rejest) {
  //     resolve('sfafsd')
  //   }
  // }

  // 返回Promise
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("hhhhhhhhh");
    }, 2000);
  });
}

// 异步函数的返回值一定是一个Promise
const promise = foo();
promise.then((res) => {
  console.log("promise then function exec:", res);
});

// 异步函数与普通函数的区别--异常处理
async function foo() {
  console.log("foo function start");
  console.log("中间代码");
  // 异步函数中的异常，会被作为异步函数返回的Promise的reject值
  throw new Error("error message");
  console.log("foo function end");
}
foo().catch((err) => {
  console.log("err", err);
});
console.log("后续代码");

七、await

async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。

await关键字有什么特点呢？

通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise；
那么await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数；

// 1.awiat跟上表达式
function requestData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve(12)
      reject(11);
    }, 2000);
  });
}

// async function foo() {
//   const res1 = await requestData() // 可以把这条代码到下一个await之前的代码看出then中处理成功的代码
//   // 当await返回为失败状态时，运行报错，因为没有写失败时的处理代码
//   console.log("后面代码1", res1);
//   console.log("后面代码2");
//   console.log("后面代码3");

//   const res2 = await requestData()
//   console.log("res2后面的代码", res2);
// }
// foo()

// 2.reject值
async function foo() {
  const res1 = await requestData();
  console.log("res1", res1);
}
foo().catch((err) => {
  console.log("err:", err); // err: 11
});