Promise的基本理解

为什么需要Promise

• 需求 通过ajax请求id，再根据id请求用户名，再根据用户名获取邮箱📮

回调地狱 在回调函数中嵌套回调 Promise解决了回调地狱

1）Promise的基本使用

Promise是一个构造函数，通过new关键字实例化对象 语法

new Promise((resolve , reject) =>{})

• Promise接收一个函数作为参数
• 这个函数接受两个参数
  • resolve ：成功的函数
  • reject ：失败的函数

promise实例有两个属性

• state:状态
• result：结果

2）Promise的状态

第一种状态：pending(进行中)

第二种状态：fulfilled（已完成，成功）

第三种状态：rejected（已拒绝，失败）

promise状态的改变

通过调用resolve() 和reject() 改变promise对象的状态

示例：

let p = new Promise((resolve,reject)=>{
      resolve();
     })
     console.dir(p);  //promise的状态为  fulfilled

let p = new Promise((resolve,reject)=>{
      reject();
     })
     console.dir(p);  //promise的状态为  rejected

• resolve():调用函数，使当前promise对象的状态改成fuifilled
• reject():调用函数，使当前promise对象的状态改成rejected

promise状态的改变是一次性的

3）promise的结果

示例

 let p = new Promise((resolve, reject) => {
        // resolve("成功的结果");
        reject("失败的结果");
      });
      console.dir(p);

Promise的方法 示例

let p = new Promise((resolve, reject) => {
      // resolve("成功的结果");
      reject("失败的结果");
    });
    // console.dir(p);

    // then方法函数
    // 有两个=>参数
    // 1.是一个函数
    // 2.还是一个函数
    // 返回值:是一个promise对象
    p.then(
      () => {
        // 当promise的状态为fulfilled时，执行
        console.log("成功时调用");
      },
      () => {
        // 当promise的状态为rejected时，执行
        console.log("失败时调用");
      }
    );
    console.dir(p);

• 在then方法的参数函数中，通过形参使用promise对象的结果

then方法返回的是一个新的promise对象，他的状态是padding

⭐️⭐️⭐️ promise的状态不改变，不会执行then里面的方法

 // 如果promise的状态不改变，then里面的方法不会执行
    let p = new Promise((resolve, reject) => {});
    p.then(
      (res) => {
        console.log("成功");
      },
      (reason) => {
        console.log("失败");
      }
    );
    console.dir(p);

如果在then方法中，出现代码错误，会将返回的promise实例改为reject状态

 let p = new Promise((resolve, reject) => {
        resolve();
      });
      const t = p.then(
        (res) => {
          // 这里出错，会将t实例的状态改成reject
          console.log(a);
        },
        (reason) => {
          console.log("失败", reason);
        }
      );
      t.then(
        (res) => {
          console.log("成功", res);
        },
        (reason) => {
          console.log("失败52", reason);
        }
      );
      console.dir(t);

catch方法

  let p = new Promise((resolve, reject) => {})
        .then((res) => {
          // 成功时被执行
          console.log(res);
        })
        .catch((error) => {
          // 失败时被执行
          console.log(error);
        });