Promise讲解，async和await修饰符

wendy_qx

已于 2023-06-05 10:45:15 修改

阅读量595

点赞数 2

分类专栏： javaScript方法文章标签： javascript 前端 vue.js Powered by 金山文档

于 2023-03-03 11:10:00 首次发布

本文链接：https://blog.csdn.net/wendy_qx/article/details/129302729

版权

javaScript方法专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Promise的作用

Promise是Es6中的语法，用于解决异步回调的问题（回调地狱）。

回调地狱：回调函数中嵌套回调

Promise解决了回调地狱

new Promise(( resolve, reject ) =>{})
//Promise接受一个函数作为参数
//在参数函数中有两个参数
  // resolve: 成功函数
 // reject: 失败函数

Promise的状态

总结：

Promise对象中有一个叫promiseState的属性，它表示了Promise对象的状态

pending:表示等待中状态

fulfilled:表示成功状态

rejected:表示失败状态

pending（等待中）：

// 实例化Promise对象后就是pending状态
    let p = new Promise(function (reslove, reject) {

    });
    console.log(p);

fulfilled（成功）：

 let p = new Promise(function (reslove, reject) {
        reslove()// 当调用成功函数后，promise的状态就是成功（fulfilled）
    });
    console.log(p);

rejected（失败）：

let p = new Promise(function (reslove, reject) {
      reject(); // 当调用失败函数后，promise的状态就是成功（rejected）
    });
    console.log(p);

Promise方法

总结：Promise原型上有then和catch方法

.then()方法函数：它可以接收两个参数，两个参数都是函数。返回值是一个Promise对象。

1.当Promise的状态是成功（fulfilled）时执行第一个参数函数，用于成功时调用。

2.当Promise的状态是失败（rejected）时执行第二个参数函数，相当于.catch()方法，用于失败时调用。

.catch()方法：它的参数是一个函数参数

1. 当Promise的状态是失败（rejected）被执行。

2. 当Promise执行过程出现代码错误时,被执行。

注：当promise状态为pending状态时，.then()和.catch()都不会执行。

.then()方法

当promise的状态为fulfilled时

let p = new Promise(function (reslove, reject) {
      // 通过调用reslove, reject传递参数，改变当前promise的状态
      let value = "123123";
      reslove(value); // 成功状态
    });
    p.then(
      (val) => {
        //当promise的状态为fulfilled时调用then方法的第一个参数函数
        console.log("成功的结果", val);
      },
      (err) => {
        console.log("失败的结果", err);
      }
    );
    console.log(p);

当promise的状态为reject时

let p = new Promise(function (reslove, reject) {
      // 通过调用reslove, reject传递参数，改变当前promise的状态
      let err = "err";
      reject(err); // 失败状态
    });
    p.then(
      (val) => {
        //当promise的状态为fulfilled时调用then方法的第一个参数函数
        console.log("成功的结果", val);
      },
      (err) => {
        //当promise的状态为rejected时调用then方法的第二个参数函数
        console.log("失败的结果", err);
      }
    );
    console.log(p);

.catch()方法

catch中的参数函数在什么时候被执行？

1. 当Promise的状态为rejcted时被执行，注：在链式写法时，当then方法有第二个函数参数时，catch方法不会被调用

  let p = new Promise(function (reslove, reject) {
      // 通过调用reslove, reject传递参数，改变当前promise的状态
      let err = "err";
      reject(err); // 失败状态
    });
    p.then((val) => {
      console.log("成功的结果", val);
    }).catch((err) => {
      //当promise的状态为rejected时调用catch方法
      console.log(err);
    });
    console.log(p);

2. 当Promise执行过程出现代码错误时,被执行

 let p = new Promise(function (reslove, reject) {
      throw new Error("出错了"); // 让promise执行出错
    });
    p.then((val) => {
      console.log("成功的结果", val);
    }).catch((err) => {
      //当Promise执行过程出现代码错误时
      console.log(err);
    });

解决回调地狱

需求：通过id请求用户名.再根据用户名获取用户email,通过emai获取消息内容

   //  通过id请求用户名.再根据用户名获取用户email,通过emai获取消息内容

    let idArr = [
      { id: 1, name: "小李" },
      { id: 2, name: "小刘" },
      { id: 3, name: "小喻" },
      { id: 4, name: "小蒋" },
    ];
    let emailArr = [
      { name: "小李", email: "小李QQ" },
      { name: "小刘", email: "小刘QQ" },
      { name: "小喻", email: "小喻QQ" },
      { name: "小蒋", email: "小蒋QQ" },
    ];

    let msgArr = [
      { email: "小李QQ", msg: "小李划水" },
      { email: "小刘QQ", msg: "小刘划水" },
      { email: "小喻QQ", msg: "小喻划水" },
      { email: "小蒋QQ", msg: "小蒋划水" },
    ];
    // 模仿接口，通过id查询用户名
    function findName(id) {
      let userName = "";
      idArr.forEach((item) => {
        if (item.id == id) {
          userName = item.name;
        }
      });
      return userName;
    }
    // 模仿接口，通过用户名查询email
    function findEmail(name) {
      let userEmail = "";
      emailArr.forEach((item) => {
        if (item.name == name) {
          userEmail = item.email;
        }
      });
      return userEmail;
    }

    // 模仿接口，通过email查询消息
    function findMsg(email) {
      let userMsg = "";
      msgArr.forEach((item) => {
        if (item.email == email) {
          userMsg = item.msg;
        }
      });
      return userMsg;
    }

普通写法

new Promise(function (reslove, reject) {
      // 调用findName接口,通过id查找用户名
      let userName = findName(1);
      if (userName != "") {
        // 查找到用户，改变promise状态为成功，并传值
        reslove(userName);
      } else {
        // 没有查找到用户，改变promise状态为失败
        reject("没有查找到用户");
      }
    })
      .then((userName) => {
        // 调用findEmail接口，通过用户名查找email
        let userEmail = findEmail(userName);
        return new Promise(function (reslove, reject) {
          if (userEmail != "") {
            reslove(userEmail);
          } else {
            reject("没有查找到邮箱");
          }
        });
      })
      .then((userEmail) => {
        // 调用findMsg接口,用过email查找到消息
        let userMsg = findMsg(userEmail);
        console.log(userMsg);
      })
      .catch((err) => {
        // catch方法放在最后，用于捕获错误
        console.log(err);
      });

优化写法

牢记：promise是为了解决回调地狱问题

1.promise处于成功状态时调用then()，promise处于失败状态时调用catch()。

2.通过调用reslove()改变promise状态为成功，调用reject（）改变promise状态为失败。

3.then()方法的返回值是promise对象，且reslove()可以携带参数，所以我们可以采用链式写法。

4.因为then()方法的返回值是promise对象，我们可以在then（）方法中直接使用return，把值返回出去，在下一级的then（）方法会接收到值。使用return后，当前promise对象的状态为成功。代码出现错误时，当前promise的状态为失败，并且。catch（）方法会捕获错误

new Promise(function (reslove, reject) {
      // 调用findName接口,通过id查找用户名
      let userName = findName(1);
      if (userName != "") {
        reslove(userName);
      } else {
        reject("没有查找到用户");
      }
    })
      .then((userName) => {
        // 调用findEmail接口，通过用户名查找email
        let userEmail = findEmail(userName);
        return userEmail //then()方法返回值是promise 使用return后，当前promise对象的状态为成功
        // ...后续链式写法同样可以使用return
      })
      .then((userEmail) => {
        // 调用findMsg接口,用过email查找到消息
        let userMsg = findMsg(userEmail);
        console.log(userMsg);
      })
      .catch((err) => {
        // catch方法放在最后，用于捕获错误
        console.log(err);
      });

async和await

async

使用async修饰函数，函数的返回值是一个promise对象，这个promise对象的值由async修饰的函数的返回值决定

1.如果被async修饰的函数的返回值是一个非Promise类型的数据

async function main() {
      //   1.如果被async修饰的函数的返回值是一个非Promise类型的数据
      return "非Promise类型的数据"; //一个字符串 数字 布尔值等都是成功的Promise对象
    }
    let result = main();
    console.log(result);
    // main()函数的返回值是promise对象，它的值由mian()函数return的值决定

2.如果被async修饰的函数的返回值是一个promise对象，

async function main() {
      // 2. 如果返回的时一个Promise对象
      return new Promise((resolve, reject) => {
        resolve("OK"); //返回的是成功Promise对象,状态值:[[PromiseState]]:"fulfilled"
        //    reject("Err") //返回的是失败Promise对象,状态值:[[PromiseState]]:"rejected"
      });
    }
    let result = main();
    console.log(result);
    // main()函数的返回值是promise对象，它的值由返回的resolve(),reject()的值决定

3.如果被async修饰的函数抛出异常

  async function main() {
      return new Promise((resolve, reject) => {
        // 3. 抛出异常
        throw "oh No"; // 状态值:[[PromiseState]]:"rejected",结果是抛出的值
      });
    }
    let result = main();
    console.log(result);
    // main()函数异常，返回的promise状态为失败

await

注：await 必须写在 async 函数中, 但 async 函数中可以没有 await

await 右侧的表达式一般为 promise 对象, 但也可以是其它的值

1. 如果await 右侧的表达式是 promise 对象, await 返回的是 promise 成功的值也就是resolve()中的值

2. 如果await 右侧的表达式是其它值, 直接将此值作为 await 的返回值

3.注：如果await 右侧的表达式是 promise 对象，且右边的promise状态为失败，就会抛出异常, 需要通过 try...catch 捕获处理

举例：

1.如果await右边是promise对象

 async function main() {
      let p = new Promise(function (reslove, reject) {
        reslove("我是成功时候的值");
      });
      let res = await p;
      console.log(res);// 打印：我是成功时候的值
    }
    main();
    // async 修饰的main()函数中，await右边是promise对象，所以await修饰的返回值是reslove()中的值

2.如果右侧为其他类型的数据

async function main() {
      let val = 20;
      let res = await val;
      console.log(res); // 打印：20
    }
    main();
    // async 修饰的main()函数中，await右边是其他类型的数据，await直接将值返回

3.如果右侧的promise的状态是失败

async function main() {
      let p = new Promise(function (reslove, reject) {
        reject("错误");
      });
      try {
        let res = await p;
      } catch (error) {
        console.log(error); // 捕获错误,值为reject()的值
      }
    }
    main();
    // async 修饰的main()函数中，await右边是promise对象且promise的状态为失败，那么就要使用try...catch捕获错误

async和await结合

    //  通过id请求用户名.再根据用户名获取用户email,通过emai获取消息内容

    let idArr = [
      { id: 1, name: "小李" },
      { id: 2, name: "小刘" },
      { id: 3, name: "小喻" },
      { id: 4, name: "小蒋" },
    ];
    let emailArr = [
      { name: "小李", email: "小李QQ" },
      { name: "小刘", email: "小刘QQ" },
      { name: "小喻", email: "小喻QQ" },
      { name: "小蒋", email: "小蒋QQ" },
    ];

    let msgArr = [
      { email: "小李QQ", msg: "小李划水" },
      { email: "小刘QQ", msg: "小刘划水" },
      { email: "小喻QQ", msg: "小喻划水" },
      { email: "小蒋QQ", msg: "小蒋划水" },
    ];
    // 模仿接口，通过id查询用户名
    function findName(id) {
      let userName = "";
      idArr.forEach((item) => {
        if (item.id == id) {
          userName = item.name;
        }
      });
      return userName;
    }
    // 模仿接口，通过用户名查询email
    function findEmail(name) {
      let userEmail = "";
      emailArr.forEach((item) => {
        if (item.name == name) {
          userEmail = item.email;
        }
      });
      return userEmail;
    }

    // 模仿接口，通过email查询消息
    function findMsg(email) {
      let userMsg = "";
      msgArr.forEach((item) => {
        if (item.email == email) {
          userMsg = item.msg;
        }
      });
      return userMsg;
    }

    async function main() {
      let userName = await findName(1);
      let userEmail = await findEmail(userName);
      let userMsg = await findMsg(userEmail);
      console.log(userMsg);
    }
    main();
    // 使用await将异步代码同步化，await顾名思义，他会等待右边的表达式执行完再往下执行