• 详解ES6的Promise


     ES6(ECMAScript 6)是JavaScript的一种标准,也被称为ES2015。它是在2015年发布的第六个ECMAScript标准版本,引入了许多新的语法和特性来增强JavaScript的功能和可读性。

    文章目录

    一、创建promise

    二、处理Promise

    三.Promise链

     四.Promise.all和Promise.race

    五.异步代码的可读性

    总结

    一个promise的操作实例:


    前言

    ES6引入的Promise是一种处理异步操作的新方式,它提供了更清晰、更易于管理的方式来处理回调函数。Promise是一个表示异步操作最终完成或失败的对象,它有三种状态:未完成(Pending)、已完成(Fulfilled)、已失败(Rejected)。


    以下是ES6 Promise的详细解释:

    一、创建promise

    你可以使用Promise构造函数来创建一个新的Promise对象。构造函数接受一个函数作为参数,这个函数包含两个参数,通常称为resolvereject,分别用于表示操作成功完成或失败。

    1. const myPromise = new Promise((resolve, reject) => {
    2. // 异步操作,例如从服务器获取数据
    3. if (/* 操作成功 */) {
    4. resolve(result); // 成功,将结果传递给resolve
    5. } else {
    6. reject(error); // 失败,将错误传递给reject
    7. }
    8. });

    二、处理Promise

    你可以使用then()方法来处理Promise的结果,then()方法接受两个参数,一个是成功时的回调函数,另一个是失败时的回调函数。

    1. myPromise.then(
    2. (result) => {
    3. // 处理成功结果
    4. },
    5. (error) => {
    6. // 处理失败情况
    7. }
    8. );

    你也可以使用catch()方法来处理Promise的错误,它是then(null, rejection)的简写。

    1. myPromise
    2. .then((result) => {
    3. // 处理成功结果
    4. })
    5. .catch((error) => {
    6. // 处理失败情况
    7. });

    三.Promise链

    你可以链式调用多个then()方法,形成一个Promise链,每个then()方法都可以返回一个新的Promise,从而实现连续的异步操作。

    1. myPromise
    2. .then((result) => {
    3. // 第一个异步操作
    4. return anotherPromise;
    5. })
    6. .then((result) => {
    7. // 第二个异步操作
    8. return yetAnotherPromise;
    9. })
    10. .then((result) => {
    11. // ...
    12. })
    13. .catch((error) => {
    14. // 处理任何链中的错误
    15. });

     四.Promise.all和Promise.race

         ES6还引入了Promise.all()Promise.race()方法,用于处理多个Promise对象。

    • Promise.all()接受一个Promise数组,返回一个新的Promise,只有当所有Promise都成功完成时才成功,结果是一个包含所有Promise结果的数组。

    • Promise.race()接受一个Promise数组,返回一个新的Promise,只要有一个Promise成功完成或失败,就会立即返回对应的结果或错误。


    五.异步代码的可读性

    Promise的一个主要优势在于提高了异步代码的可读性。通过使用Promise,你可以更清晰地表达异步操作的流程,避免了深度嵌套的回调函数(回调地狱),使代码更易于维护。

    虽然Promise是一种强大的工具,但它也需要小心使用,包括处理错误、处理异步代码的边界情况等。当与async/await结合使用时,Promise可以让你更轻松地编写异步JavaScript代码。


    总结

    1. 异步操作处理:Promise用于处理需要等待时间较长的操作,如网络请求、文件读取等。通过Promise可以更清晰地表达异步操作的执行顺序和结果处理。

    2. 状态:Promise有三种状态:pending(进行中)、fulfilled(已完成)和rejected(已失败)。初始状态为pending,当操作成功完成时,状态变为fulfilled,如果发生错误,状态则变为rejected。

    3. then()方法:Promise对象的then()方法用于指定操作成功或失败时的回调函数。then()方法可以链式调用,每个then()方法都返回一个新的Promise实例,以支持连续的异步操作。

    4. catch()方法:Promise对象的catch()方法用于捕获被拒绝的Promise,并执行相应的错误处理逻辑。

    5. Promise.all():Promise.all()方法接收一个包含多个Promise实例的数组,只有当所有Promise都成功完成时,才会触发后续操作。

    6. Promise.race():Promise.race()方法接收一个包含多个Promise实例的数组,只要有一个Promise实例率先完成,就会触发后续操作。

    7. Promise.resolve()和Promise.reject():Promise.resolve()方法用于将其他对象转为Promise对象,Promise.reject()方法用于将对象转为一个被拒绝的Promise。

    8. 异常处理:Promise内部的异常会被捕获并作为rejected状态进行处理,可以通过catch()方法捕获异常并进行相应的错误处理。

    一个promise的操作实例:

    1. // 示例1:模拟异步操作
    2. function delay(ms) {
    3. return new Promise(resolve => setTimeout(resolve, ms));
    4. }
    5. delay(2000).then(() => {
    6. console.log('2秒后执行的代码');
    7. });
    8. // 示例2:处理异步请求
    9. function fetchData() {
    10. return new Promise((resolve, reject) => {
    11. // 模拟异步请求,这里使用setTimeout代替真实的网络请求
    12. setTimeout(() => {
    13. const data = { id: 1, name: 'John Doe' };
    14. // 模拟请求成功
    15. resolve(data);
    16. // 模拟请求失败
    17. // reject(new Error('请求失败'));
    18. }, 1000);
    19. });
    20. }
    21. fetchData().then(response => {
    22. console.log('请求成功:', response);
    23. }).catch(error => {
    24. console.log('请求失败:', error);
    25. });
    26. // 示例3:多个异步操作的顺序执行
    27. function step1() {
    28. return new Promise(resolve => {
    29. setTimeout(() => {
    30. console.log('第一步');
    31. resolve();
    32. }, 1000);
    33. });
    34. }
    35. function step2() {
    36. return new Promise(resolve => {
    37. setTimeout(() => {
    38. console.log('第二步');
    39. resolve();
    40. }, 2000);
    41. });
    42. }
    43. function step3() {
    44. return new Promise(resolve => {
    45. setTimeout(() => {
    46. console.log('第三步');
    47. resolve();
    48. }, 1500);
    49. });
    50. }
    51. step1()
    52. .then(step2)
    53. .then(step3)
    54. .then(() => {
    55. console.log('所有步骤完成');
    56. });

  • 相关阅读:
    CAD Assistant - 3D模型格式转换利器
    人工智能领域:面试常见问题超全(深度学习基础、卷积模型、对抗神经网络、预训练模型、计算机视觉、自然语言处理、推荐系统、模型压缩、强化学习、元学习)
    (三)行为模式:10、策略模式(Strategy Pattern)(C++示例)
    2022亚太C题详细思路
    八股文随笔3
    IROS 2022 | 基于实例编码Transformer的3D零件装配,性能提升10%
    三维空间常用函数(二) c++ Qt
    从零开始的Docker Desktop使用,Docker快速上手 ( ̄︶ ̄) Docker介绍和基础使用
    类欧几里得算法
    为什么选择微服务架构? 微服务架构的10个核心优势 总结
  • 原文地址:https://blog.csdn.net/m0_71966801/article/details/133817801