首页 > 其他分享 >js异步之Promise使用

js异步之Promise使用

时间:2024-08-15 11:29:01浏览次数:14  
标签:异步 resolve console log res js Promise reject

Promise是异步编程的一种解决方案,是一个对象,可以获取异步操作的消息,大大改善了异步编程的困难,避免了回调地狱,比传统的解决方案回调函数和事件更合理和更强大。

从语法上讲,Promise是一个对象,它可以获取异步操作的消息。提供了一个统一的API,各种异步操作都可以用同样的方法进行处理

 

Promise的实例有三个状态:Pending(进行中)、Resolved(已完成)、Rejected(已拒绝)

Promise的实例有两个过程:
pending > fulfiled :Resolved
pending > rejected :Rejected

 

创建Promise对象

  const p1 = new Promise((resolve) => {
    setTimeout(() => {
      resolve("a");
    }, 2000);
  });
  const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("b");
    }, 1000);
  });

then、catch、finally方法

then 方法:可以接收两个回调函数作为参数,第一个回调函数是Promise对象的状态改变为 resoved 是调用,第二个回调函数是 Promise 对象的状态变为 rejected 时调用。

catch方法:在执行resolve回调函数时,如果出错,抛出异常,不会停止运行,而是进入catch 方法中。若未定义reject回调函数则reject时会被当成error处理

finally方法:用于指定不管 Promise 对象最后状态如何,都会执行的操作。

resolve

  p1.then(
    (res_resolve) => {
      console.log("resolved:", res_resolve); //resolved: a
    },
    (res_reject) => {
      console.log("rejected:", res_reject);
    }
  )
    .catch((res) => {
      console.log("error:", res);
    })
    .finally(() => {
      console.log("done"); //done
    });

reject

  p2.then(
    (res_resolve) => {
      console.log("resolved:", res_resolve);
    },
    (res_reject) => {
      console.log("rejected:", res_reject); //rejected: b
    }
  ).catch((res) => {
    console.log("error:", res);
  });

  p2.then((res_resolve) => {
    console.log("resolved:", res_resolve);
  }).catch((res) => {
    console.log("error:", res); //error: b  若未定义reject回调则reject时会被当成error处理
  });

链式调用

 p1.then(
    (res_resolve) => {
      console.log("p1 resolved:", res_resolve); //p1 resolved: a
      return p2;
    },
    (res_reject) => {
      console.log("p1 rejected:", res_reject);
    }
  )
    .catch((res) => {
      console.log("p1 error:", res); //p1 error: b
    })
    .then(
      (res_resolve) => {
        console.log("p2 resolved:", res_resolve); //p2 resolved: undefined
      },
      (res_reject) => {
        console.log("p2 rejected:", res_reject);
      }
    )
    .catch((res) => {
      console.log("p2 error:", res);
    });

似乎并不是想要的结果,修改如下: 


  p1.then(
    (res_resolve) => {
      console.log("p1 resolved:", res_resolve); //p1 resolved: a
      return p2;
    },
    (res_reject) => {
      console.log("p1 rejected:", res_reject);
    }
  )
    .then(
      (res_resolve) => {
        console.log("p2 resolved:", res_resolve);
      },
      (res_reject) => {
        console.log("p2 rejected:", res_reject); //p2 rejected: b
      }
    )
    .catch((res) => {
      console.log("p2 error:", res);
    });

  p1.then((res) => {
    console.log("p1 resolved:", res); //p1 resolved: a
    return p2;
  })
    .then((res) => {
      console.log("p2 resolved:", res);
    })
    .catch((res) => {
      console.log("p2 error:", res); //p2 error: b
    });

async函数

async function func(params) {
    return params;
  }

  func("a")
    .then((res) => {
      console.log(res);//a
      return func("b");
    })
    .then((res) => {
      console.log(res);//b
    });

 Promise.all方法

只有等所有请求都结束才会有结果,都成功才会执行then,返回结果按照参数顺序
 const list1 = [
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("list1 resolve index:1");
      }, 2000);
    }),
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("list1 resolve index:2");
      }, 1000);
    }),
  ];
  const list2 = [
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("list2 resolve index:1");
      }, 3000);
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("list2 reject index:2");
      }, 2000);
    }),
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("list2 resolve index:3");
      }, 1000);
    }),
  ];
  const list3 = [
    new Promise((resolve, reject) => reject("list3 reject index:1")),
    new Promise((resolve, reject) => reject("list3 reject index:2")),
    new Promise((resolve, reject) => reject("list3 reject index:3")),
  ];


  Promise.all(list1).then((res) => {
    console.log(res); //['list1 resolve index:1', 'list1 resolve index:2']
  });
  Promise.all(list2)
    .then((res) => {
      console.log(res);
    })
    .catch((res) => {
      console.log(res); //list2 reject index:2
    });

 Promise.any方法

只要有一个成功,就会执行then,只有当所有的promise都失败,才算失败
 Promise.any(list1).then((res) => {
    console.log(res); // list1 resolve index:2
  });
  Promise.any(list2)
    .then((res) => {
      console.log(res); //list2 resolve index:3
    })
    .catch((res) => {
      console.log("error:", res);
    });
  Promise.any(list3)
    .then((res) => {
      console.log(res);
    })
    .catch((res) => {
      console.log("error:", res); //error: AggregateError: All promises were rejected
    });

 Promise.race方法

只要最快的那个,不管结果
  Promise.race(list1).then((res) => {
    console.log(res); // list1 resolve index:2
  });
  Promise.race(list2)
    .then((res) => {
      console.log(res); //list2 resolve index:3
    })
    .catch((res) => {
      console.log("error:", res);
    });
  Promise.race(list3)
    .then((res) => {
      console.log(res);
    })
    .catch((res) => {
      console.log("error:", res); //error: list3 reject index:1
    });
超时处理
  const timeoutPromise = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error("Request timeout")), 500);
  });
  Promise.race([p1, timeoutPromise])
    .then((res) => console.log(res))
    .catch((res) => console.log(res)); // Error: Request timeout

Promise.allSettled

等所有请求结束后,它不会执行.catch,只会执行.then
  Promise.allSettled(list1).then((res) => {
    console.log(res); // [{status: 'fulfilled', value: 'list1 resolve index:1'},{status: 'fulfilled', value: 'list1 resolve index:2'}]
  });
  Promise.allSettled(list2)
    .then((res) => {
      console.log(res); //[{status: 'fulfilled', value: 'list2 resolve index:1'},{status: 'rejected', reason: 'list2 reject index:2'},{status: 'fulfilled', value: 'list2 resolve index:3'}]
    })
    .catch((res) => {
      console.log("error:", res);
    });
  Promise.allSettled(list3)
    .then((res) => {
      console.log(res); //[{status: 'rejected', reason: 'list3 reject index:1'},{status: 'rejected', reason: 'list3 reject index:2'},{status: 'rejected', reason: 'list3 reject index:3'}]
    })
    .catch((res) => {
      console.log("error:", res);
    });

 

标签:异步,resolve,console,log,res,js,Promise,reject
From: https://www.cnblogs.com/caroline2016/p/18360555

相关文章

  • 【Three.JS零基础入门教程】第四篇:基础变换
    前期回顾:【Three.JS零基础入门教程】第一篇:搭建开发环境【Three.JS零基础入门教程】第二篇:起步案例【Three.JS零基础入门教程】第三篇:开发辅助接下来,我们通过三种基础的变换来加深对3D坐标系中坐标和单位的理解,同时也是动画的基础.分别是:移动缩放旋转效果1......
  • 基于SpringBoot+MySQL+SSM+Vue.js的药房药品采购系统(附论文)
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基于SpringBoot+MySQL+SSM+Vue.js的药房药品采购系统(附论文......
  • 基于SpringBoot+MySQL+SSM+Vue.js的旅游咨询系统
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基于SpringBoot+MySQL+SSM+Vue.js的旅游咨询系统,用户,管理......
  • JS脚本内追加的标签无法触发事件问题处理
    通过JS追加的标签无法触发事件时,就把事件挂载给这个标签父级标签,如下。//后追加标签事件不生效,挂载在父级标签varparentElement=document.getElementById('layout_detail_toolbar_0');parentElement.addEventListener('change',function(event){letta......
  • 使用 TypeScript 在 React JS 中进行路由
    一.介绍单页应用程序(SPA)中的路由支持在视图之间导航,而无需重新加载应用程序。ReactRouter是React应用程序中路由的标准库。本文简要概述了使用TypeScript设置路由的方法。二.设置项目创建一个新的React项目npxcreate-react-appreact-router-ts--template......
  • java语言,MySQL数据库;电影推荐网站 30760(免费领源码)计算机毕业设计项目推荐万套实战教
    摘 要随着互联网时代的到来,同时计算机网络技术高速发展,网络管理运用也变得越来越广泛。因此,建立一个B/S结构的电影推荐网站;电影推荐网站的管理工作系统化、规范化,也会提高平台形象,提高管理效率。本电影推荐网站是针对目前电影推荐网站的实际需求,从实际工作出发,对过去的电影......
  • java语言,MySQL数据库;基于Web的高校知识共享系统设计与实现 32050(免费领源码)计算机毕业
    摘 要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题。针对高校知识共享系统等问题,对高校知识共享系统进行研究分析,然后开发设计出高校知识共享系统以......
  • java语言,MySQL数据库;23825基于java的员工考勤系统(免费领源码)计算机毕业设计项目推荐万
    摘 要由于数据库和数据仓库技术的快速发展,员工考勤系统建设越来越向模块化、智能化、自我服务和管理科学化的方向发展。考勤管理系统对处理对象和服务对象,自身的系统结构,处理能力,都将适应技术发展的要求发生重大的变化。员工考勤系统除了具有共享系统的全部功能以外,能通过......
  • JS贪吃蛇
    1.整个简洁版的贪吃蛇完整代码,后面会解析<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>贪吃蛇</title></head><bodystyle="height:90vh;display:flex;justify-content:center;align-items:center;......
  • lua版promise实现 - 从异步回调多层嵌套开始
    异步回调代码,很容易就写出下面这样的不断嵌套的代码。如果还夹杂着各种逻辑的话,可读性会很差,还容易出错。AsyncLoadRes("ResA",function(textA)print("ResAloadfinish")AsyncLoadRes("ResB",function(textB)print("ResBloadfinish")AsyncLoad......