ES6中的Promise对象与async和await方法详解

ES6中的Promise对象与async和await方法详解

在ES6之前,JavaScript的异步编程需要使用回调函数,这种方式常常导致代码难以阅读和维护。ES6引入Promise对象和async/await方法,使得异步编程更加易于理解和控制。

Promise对象

Promise对象是ES6提供的一种异步编程的解决方案,是一个代表一个异步操作的最终结果的对象。Promise对象有3个状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。

创建Promise对象

通过Promise构造函数可以创建新的Promise对象,它接受一个函数作为参数,这个函数会立即执行,并接受两个参数resolvereject

const promise = new Promise(function(resolve, reject) {
  // 异步操作
  setTimeout(function() {
    if (/* 操作成功 */) {
      resolve("操作成功");
    } else {
      reject(new Error("操作失败"));
    }
  }, 1000);
});

Promise对象的方法

  • then(onFulfilled, onRejected): 当Promise对象的状态变成fulfilled时调用onFulfilled函数,当状态变成rejected时调用onRejected函数。这个方法返回一个新的Promise对象。
promise
  .then(function(value) {
    console.log(value); // "操作成功"
  }, function(error) {
    console.log(error); // Error: "操作失败"
  });
  • catch(onRejected): 相当于then(null, onRejected),只捕捉rejected状态的Promise对象。如果Promise对象的状态是fulfilled,则会跳过catch方法,直接执行后面的then方法。
promise
  .then(function(value) {
    console.log(value);
  })
  .catch(function(error) {
    console.log(error); // Error: "操作失败"
  });

Promise.all方法

Promise.all方法可以同时执行多个Promise对象,等待所有Promise对象都显式为fulfilled状态时返回一个新的Promise对象。新的Promise对象的resolved值为一个数组,数组中的元素为每个Promise对象的resolved值,按照传入Promise.all方法的数组的顺序排列。

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(function(values) {
    console.log(values); // [1, 2, 3]
  });

async/await方法

async函数是ES7中引入的一种新的异步编程机制,它可以让我们更好的写出异步代码,终止了JavaScript里面多层回调的写法。awaitasync函数的一部分,它可以在线性代码的基础上写出异步的代码,await后面跟着的是一个返回Promise对象的表达式,await会暂停async函数的执行,等待Promise对象的resolved值。

async函数

async函数返回一个Promise对象,可以使用Promise的then方法添加回调函数。

async function asyncFunc() {
  // 异步操作
  return "异步操作完成";
}

asyncFunc().then(function(value) {
  console.log(value); // "异步操作完成"
});

await表达式

await表达式会暂停async函数的执行,等待Promise对象的resolved值,并使用其resolved值作为表达式的值。如果Promise对象rejected,则抛出异常。

async function asyncFunc() {
  // 异步操作
  const resolvedValue = await Promise.resolve("异步操作完成");
  console.log(resolvedValue); // "异步操作完成"
}

asyncFunc();

错误处理

在async/await函数内部使用try...catch语句捕获异步操作中的错误。

async function asyncFunc() {
  try {
    // 异步操作
    const resolvedValue = await Promise.reject(new Error("异步操作失败"));
  } catch (error) {
    console.log(error); // Error: "异步操作失败"
  }
}

asyncFunc();

示例1

下面是一个将使用异步API得到的数组中的所有元素的字符串长度置于数组中并返回的函数。

async function getStringLengthsFromArray() {
  try {
    const array = await getArrayAsync();
    const stringLengths = array.map(function(str) {
      return str.length;
    });
    return stringLengths;
  } catch (error) {
    console.log(error);
  }
}

function getArrayAsync() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(["apple", "banana", "orange"]);
    }, 1000);
  });
}

getStringLengthsFromArray()
  .then(function(stringLengths) {
    console.log(stringLengths); // [5, 6, 6]
  });

示例2

下面是一个使用asyncawait函数实现的得到用户Github信息的例子:

async function getUserInfo(username) {
  try {
    const userInfo = await fetch(`https://api.github.com/users/${username}`).then(function(response) {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      return response.json();
    });
    const repositories = await fetch(userInfo.repos_url).then(function(response) {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      return response.json();
    });
    userInfo.repositories = repositories;
    return userInfo;
  } catch (error) {
    console.log(error);
  }
}

getUserInfo("generalsimus")
  .then(function(userInfo) {
    console.log(userInfo.repositories); // Array[30]
  });

结束语

使用Promise对象和async/await方法可以使得异步编程更加清晰和易于维护。当然,在处理错误的时候也需要注意。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ES6中的Promise对象与async和await方法详解 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • window.location.href的用法(动态输出跳转)

    关于window.location.href的用法,先来介绍一下它的基本概念。 window.location.href是一个引用当前页面的URL字符串,它可以动态地改变页面的路径,实现页面的跳转。通过设置window.location.href的值,可以让当前页面跳转到指定的URL地址。 以下是window.location.href的一些常见应用场景: …

    JavaScript 2023年6月11日
    00
  • JS中正则表达式要注意lastIndex属性

    JavaScript中的正则表达式是一种特殊的对象类型,用来匹配字符串中的模式。在正则表达式匹配时,需要注意到lastIndex属性。 lastIndex属性介绍 lastIndex是RegExp对象的一个属性,表示正则表达式匹配下一个字符的位置。当进行全局匹配时,每次匹配都是从上一次匹配完成后lastIndex处继续查找。当进行非全局匹配时,lastInd…

    JavaScript 2023年6月10日
    00
  • 浅谈ECMAScript 中的Array类型

    下面我来详细讲解一下“浅谈 ECMAScript 中的 Array 类型”。 什么是 Array 类型 在 ECMAScript 中,Array 类型是一种特殊的对象,用于表示一组数据的集合。数组中的数据可以是任意类型的,包括数字、字符串、布尔值、对象等等。 数组中的数据是按照顺序保存的,每一个数据都有一个对应的索引值,从0开始递增。我们可以通过索引值来访问…

    JavaScript 2023年5月27日
    00
  • 分享5个JS 高阶函数

    下面就是分享5个JS高阶函数的攻略。 什么是高阶函数? 在JavaScript中,高阶函数是指能够接受一个或多个函数作为参数,并返回一个新函数的函数。它们是函数式编程的核心概念之一。 1. Array.prototype.map map 是 JavaScript 中最常用的高阶函数之一。该方法接受一个函数作为参数,该函数将应用到数组的每个元素,并返回一个新数…

    JavaScript 2023年5月27日
    00
  • 基于BootstrapValidator的Form表单验证(24)

    下面是一份详细的“基于BootstrapValidator的Form表单验证(24)”的完整攻略。 简介 在Web开发中,表单验证是非常重要的一部分,可以帮助我们保证用户输入的数据的准确性、有效性和安全性。BootstrapValidator是一个快速且易于使用的jQuery表单验证插件,它可以通过简单的配置和调用API即可实现表单验证。本攻略将带你一步步完…

    JavaScript 2023年6月10日
    00
  • js中将HTMLCollection/NodeList/伪数组转换成数组的代码

    将 HTMLCollection、NodeList、伪数组转换成真正的数组是 JavaScript 中常见的操作,常常用于操作 DOM 元素或者获取一系列的元素,比如在获取 class 为 list 的所有元素后需要对它们进行操作。 使用 Array.prototype.slice.call() 方法 可以通过 Array.prototype.slice.c…

    JavaScript 2023年5月27日
    00
  • JSONObject与JSONArray使用方法解析

    JSONObject与JSONArray使用方法解析 在Java开发中,我们经常需要操作JSON格式数据,而Java提供了两个类来操作JSON数据,分别是JSONObject和JSONArray。 JSONObject JSONObject是JSON的对象表示法,在Java中,我们可以使用JSONObject来构建一个JSON对象。 创建JSONObject…

    JavaScript 2023年6月11日
    00
  • 设置cookie指定时间失效(实例代码)

    设置 cookie 失效时间是保持 Web 应用程序状态的关键技术之一。下面是如何在 PHP 中设置指定时间失效的 cookie 的完整攻略: 步骤 1:创建 cookie 要在 PHP 中设置 cookie,可以使用 setcookie() 函数。该函数的语法如下: setcookie(name, value, expire, path, domain, …

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部