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日

相关文章

  • javascript实现自动输出文本(打字特效)

    下面是JavaScript实现自动输出文本(打字特效)的完整攻略。 1. 前置知识 JavaScript基础知识 HTML/CSS基础知识 DOM基础知识 2. 确定需求 在实现自动输出文本的过程中,我们需要考虑以下问题: 输出文本的内容是什么? 文本输出的速度是多少? 每个字符输出的间隔时间是多少? 3. 实现步骤 3.1 HTML结构 首先,我们需要准备…

    JavaScript 2023年5月28日
    00
  • js直接编辑当前cookie的脚本

    为了编辑当前页面的cookie,我们可以利用JavaScript和Document.cookie属性实现。下面是具体步骤: 获取当前cookie字符串 使用document.cookie获取当前页面的cookie字符串。 示例代码: console.log(document.cookie); // 输出当前页面的cookie字符串 编写修改cookie的函数…

    JavaScript 2023年6月11日
    00
  • 浅谈typescript中keyof与typeof操作符用法

    当谈到TypeScript的类型系统时,我们经常听到keyof和typeof这两个操作符。这两个操作符的使用可以帮助我们更好地进行类型推断和类型检查。本文将详细讲解这两个操作符的用法以及它们在TypeScript中的常见应用。 keyof操作符 keyof操作符用于获取一个对象类型的所有键名,以联合类型的形式返回。它经常与泛型结合使用,可以在编译期进行类型检…

    JavaScript 2023年6月10日
    00
  • javascript函数式编程基础

    JavaScript函数式编程基础攻略 什么是函数式编程 函数式编程是一种编程范式,它将计算机程序看作是一系列的函数组合,以此来避免在程序中使用状态(状态指的是可变的数据)。函数式编程中的函数不会修改输入的数据,而是始终将其转换为输出。它强调纯函数,不可变性以及函数的组合性。 纯函数和不可变性 纯函数:在函数式编程中,纯函数是指: 函数执行的结果只依赖于它的…

    JavaScript 2023年6月10日
    00
  • 如何计算Web动画帧率FPS

    如何计算Web动画帧率FPS 在Web动画的开发、优化中,计算帧率FPS是非常重要的一项任务。本文将详细讲解如何计算Web动画帧率FPS。 1.浏览器中的时间线 在Web动画的开发中,我们需要了解浏览器的时间线。浏览器会不断重绘页面,这些重绘是按照一定的帧率进行的。在浏览器中,每秒钟重绘的次数就是帧率FPS。帧率通常是60FPS,但是帧率还会根据硬件性能的不…

    JavaScript 2023年6月11日
    00
  • JS document文档的简单操作完整示例

    JS document 文档是操作网页元素的核心接口。它可以通过 js 代码来获取、修改和新增 HTML 元素,以实现网页动态变化。接下来将通过两个示例介绍基本的 JS document 操作。 示例1:获取元素 在 HTML 文档中,标签是最基本的元素,通过 JS document 可以获取 HTML 中指定标签的元素。获取标签元素需要使用 getElem…

    JavaScript 2023年6月10日
    00
  • js获取浏览器的各种属性

    当我们需要编写网页时,能够获取浏览器属性的JS脚本的价值是非常巨大的。下面,我们将详细讲解下如何获取浏览器的各种属性。 1. 获取浏览器窗口大小 我们可以通过window.innerWidth和window.innerHeight属性来获取当前窗口的宽度和高度。以下是一个示例代码块: let windowWidth = window.innerWidth; …

    JavaScript 2023年6月11日
    00
  • jquery表单验证插件formValidator使用方法

    下面就是jquery表单验证插件formValidator的使用方法攻略。 什么是jquery表单验证插件formValidator? jquery表单验证插件formValidator是一款基于jQuery的表单验证插件,可快速实现表单的输入验证功能,让表单验证变得简单易用。 如何使用jquery表单验证插件formValidator? 首先,在页面中引入…

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