Promise与 async和await

原创已于 2024-10-29 15:18:21 修改 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #node.js

于 2021-12-28 15:00:11 首次发布

JavaScript 专栏收录该内容

51 篇文章

订阅专栏

本文详细解析了Promise在ES6中的概念，如何封装异步任务，以及其then和catch的使用方法。重点介绍了async和await的配合，展示了如何通过Promise实现同步执行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise

概念：Promise是ES6语法中新增的一个类，用来创建一个诺言对象。

作用：主要用来实现对异步任务的封装，从而实现异步任务具备同步执行的顺序。诺言构造时接受一个回调函数作为参数，该回调函数用来定义对应的异步任务，同时回调函存在参数，两个参数分别是resolve，reject。resolve，reject本是上是两个函数。

resolve用来在异步任务成功时向外界传递成功信息，reject代表当异步任务执行失败时需要向外界同步的信息。外界如果想要获取成功信息需要调用then操作，如果需要获取失败信息，则需要通过catch捕获失败。

使用:

创建一个诺言对象。

// 定义一个诺言
  var promise = new Promise(function(resolve, reject) {
    //该回调函数用来完成需要执行的异步任务
    var timer = setTimeout(function() {
      var num = Math.floor(Math.random() * 2);
      if (num == 1) {
        //该任务成功执行
        resolve("诺言已实现");
      } else {
        // 该任务失败执行
        reject("诺言未实现");
      }
    }, 2000);
  });
  通过诺言对象向外界传递异步任务执行结果。
  //使用该诺言对象捕获实现结果
  promise.then(function(msg) {
    console.log(msg);
    return "买房成功";
  }).then(function(msg) {
    console.log(msg);
  }).catch(function(err) {
    console.log(err)
  });

注意：then方法用来返回诺言成功时对应的数据，catch用来捕获诺言失败时

对应的数据，then方法可以通过串行操作设置多个，每一个返回的数据都会

编程新的诺言被后一个then捕获。但是catch只有一个，一旦某一个诺言执行

失败，后面的buoyant都不再执行，直接执行catch。

async和await

await直接修饰异步执行的任务对应的函数，但是修饰的函数返回值必须是Promise对象。

async修饰的函数，最终的返回结果是一个Promise对象，如果想要获取该函数内部返回的数据，此时需要调用then方法获取数据。

// 定义函数用来完成异步任务
  function startTask() {
    // 定义一个诺言
    var promise = new Promise(function(resolve, reject) {
      //该回调函数用来完成需要执行的异步任务
      var timer = setTimeout(function() {
        var num = Math.floor(Math.random() * 2);
        if (num == 1) {
          //该任务成功执行
          resolve("诺言已实现");
        } else {
          // 该任务失败执行
          reject("诺言未实现");
        }
      }, 2000);
    });
    return promise;
  }
  //调用函数
  async function start() {
    var data = await startTask();
    console.log('---------------------');
    console.log(data);
    return data;
  }
  //result是一个Promise对象
  var result = start();
  result.then(function(data) {
    console.log(data);
  });