说说es6 promise async await 以及 promise A+规范的了解

发现宝藏

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。


1. Promise

简介

Promise 是 JavaScript 中用于处理异步操作的一种方式,它表示一个异步操作的最终完成(或失败)及其结果值的表示。Promise 是 ES6 引入的,它通过链式调用来处理回调函数,避免了"回调地狱"的问题。

基本语法

js 复制代码
let promise = new Promise((resolve, reject) => {
  // 异步操作
  let success = true;
  if (success) {
    resolve("成功");
  } else {
    reject("失败");
  }
});

promise.then((result) => {
  console.log(result);  // 成功
}).catch((error) => {
  console.log(error);   // 失败
});
  • resolve(value):表示操作成功,并传递结果值。
  • reject(reason):表示操作失败,并传递错误原因。
  • then(onFulfilled, onRejected)then 方法用于指定在 Promise 状态变为 fulfilledrejected 时的回调函数。onFulfilled 在成功时执行,onRejected 在失败时执行。
  • catch(onRejected)catch 用于处理 Promise 被拒绝时的情况,等价于 then(null, onRejected)

链式调用

Promise 支持链式调用,也就是在 then() 之后可以继续返回新的 Promise,从而继续处理异步操作,避免嵌套回调。

js 复制代码
new Promise((resolve) => resolve(1))
  .then((result) => {
    console.log(result); // 1
    return result + 1;
  })
  .then((result) => {
    console.log(result); // 2
    return result + 1;
  })
  .then((result) => {
    console.log(result); // 3
  });

组合多个 Promise

Promise 也提供了 Promise.all()Promise.race() 来处理多个异步操作。

  • Promise.all():当所有的 Promise 都成功时,返回一个包含每个 Promise 结果的数组;如果有一个 Promise 失败,Promise.all() 会立即失败。
js 复制代码
Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.log(error);
  });
  • Promise.race():返回第一个完成的 Promise(无论是成功还是失败)。
js 复制代码
Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

2. async/await

简介

asyncawait 是 ES2017(ES8)引入的用于简化处理异步操作的语法糖。它们是基于 Promise 的,但使用起来更加简洁和直观。

  • async:标记一个函数为异步函数,返回一个 Promise 对象。
  • await:用于等待一个 Promise 对象的完成,await 后面必须跟一个 Promise 对象。

基本用法

js 复制代码
async function fetchData() {
  try {
    let result = await new Promise((resolve) => resolve("数据加载成功"));
    console.log(result); // 数据加载成功
  } catch (error) {
    console.error(error);
  }
}

fetchData();

异常处理

async/await 使用 try/catch 来捕获错误,这使得异步代码的异常处理变得更加简洁。

js 复制代码
async function fetchData() {
  try {
    let result = await Promise.reject("加载失败");
    console.log(result);
  } catch (error) {
    console.log(error); // 加载失败
  }
}

fetchData();

顺序执行多个异步任务

当多个异步操作需要顺序执行时,async/await 让代码更加易读:

js 复制代码
async function processTasks() {
  let task1 = await fetchData1();
  let task2 = await fetchData2();
  console.log(task1, task2);
}

processTasks();

并行执行多个异步任务

如果多个异步任务没有依赖关系,可以使用 Promise.all 来并行执行它们:

js 复制代码
async function processTasks() {
  let [task1, task2] = await Promise.all([fetchData1(), fetchData2()]);
  console.log(task1, task2);
}

processTasks();

3. Promise A+ 规范

简介

Promise A+ 是对 Promise 规范的详细描述,它定义了 Promise 应该遵循的行为,确保不同的 JavaScript 环境中的 Promise 实现是一致的。这个规范最早由社区提出并被广泛接受,成为了 ECMAScript 规范的一部分。

核心内容

Promise A+ 规范定义了 Promise 必须具有以下特性:

  1. 状态:Promise 对象只有三种状态:

    • pending(待定):初始状态,表示操作未完成。
    • fulfilled(已完成):表示操作成功,并有返回值。
    • rejected(已拒绝):表示操作失败,并有失败原因。
  2. 状态不可变 :一旦 Promise 进入 fulfilledrejected 状态,状态不可再变。

  3. 链式调用then 返回的必须是一个新的 Promise 对象,无论回调函数返回的是值还是另一个 Promise,都必须满足以下规则:

    • 如果回调函数返回一个普通值,则 then 返回的 Promise 应立即解决该值。
    • 如果回调函数返回的是另一个 Promise,则 then 返回的 Promise 应等待这个 Promise 完成。
  4. 异步执行then 中的回调函数应该在当前执行栈清空之后执行,而不是立即执行。这保证了 Promise 的异步特性。

  5. 错误传播 :如果 then 中的回调抛出异常或返回一个失败的 Promise,则后续的 catch 会处理这些错误。

示例

js 复制代码
let p = new Promise((resolve, reject) => {
  resolve("成功");
});

p.then(
  (value) => {
    console.log(value);  // "成功"
    return "继续处理";
  },
  (error) => {
    console.log(error); 
  }
).then(
  (value) => {
    console.log(value);  // "继续处理"
  }
);

总结

  • Promise:是处理异步操作的一种机制,通过链式调用和状态管理,提供更清晰的异步流程控制。
  • async/await :是 Promise 的语法糖,通过简化代码让异步编程变得更易读。
  • Promise A+ 规范 :对 Promise 行为的标准化规范,确保 Promise 的一致性和可靠性,规范了状态、错误处理和链式调用等特性。

通过结合使用 Promiseasync/await,你可以编写出更加简洁、易维护的异步代码,同时遵循 Promise A+ 规范能够保证你的代码在不同 JavaScript 环境中的一致性。

相关推荐
ling0814081441 分钟前
Vue3全局挂载Dialog组件
前端·javascript·vue
Catherinemin43 分钟前
CSS|12 display属性
前端·css
Amo 672944 分钟前
css filter: drop-shadow() 高级阴影效果
前端·css
天天进步20151 小时前
CSS中的深度选择器 deep 详解
前端·css
95岁IT民工1 小时前
大屏项目使用css混合实现光源扫描高亮效果
前端·css·vue.js
匹马夕阳1 小时前
一篇梳理清楚JavaScript ES6中的Promise
前端·javascript·es6
2401_857026232 小时前
SSM 框架结合 Vue 实现电脑测评系统:助力用户明智选择
前端·javascript·vue.js
连胜优佳2 小时前
1.zabbix概述
前端·zabbix
夜雨翦春韭2 小时前
Firefox 基本设置备忘
前端·firefox
m0_748233882 小时前
【Java Web】Axios实现前后端数据异步交互
java·开发语言·前端