耀极客论坛

 找回密码
 立即注册
查看: 509|回复: 0

深入了解JavaScript Promise

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 01:41:51 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了JavaScript Promise,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助


一 什么是 Promise?
  1. 一个 Promise 对象就像容器一样,在容器中写着一段执行具体操作的代码,并且在这段代码执行结束后,会执行两个回调函数,一个是操作成功的回调函数(resolve),一个是操作失败的回调函数(reject)
复制代码
二 为什么有 Promise?
  Promise 的出现是为了解决异步编程中,主要使用的回调机制的几个问题:
       
  • Callback hell
  Callback hell:Promise 可以把一层层嵌套的 callback 变成 .then().then()…,从而使代码编写和阅读更直观
       
  • 错误处理难:Promise 比 callback 在错误处理上更清晰直观   
  • 同时进行多个异步操作的代码编写困难:Promise 可以简单处理此情况

三 Promise常用api
       
  • .then() promise中方法执行完以后,可以执行,里面有两个参数,分别是成功的回调函数和失败的回调函数。   
  • resolve 使用 promise.resolve 方法可以快速的返回一个promise对象   
  • reject 使用 promise.reject 方法可以快速的返回一个promise对象   
  • all 同时执行多个并行异步操作。

四 Promise常用的两个用法
  1. 1 如何解决 callback hell?
复制代码
  .then()没有返回值的函数,会使得 Promise 链不再延续,此时你再往后面调用 .then() 是没有作用的。
  1. Promise.resolve('foo').then(function(s) {
  2.   console.log(s);
  3. }).then(function(s) {
  4.   // Never executed
  5.   console.log(s);
  6. });
复制代码
  .then()中有返回值函数,会使 Promise 链可以继续
  1. Promise.resolve('foo').then(function(s) {
  2.   console.log(s);
  3.   return s + 'bar';
  4. }).then(function(s) {
  5.   console.log(s);
  6. });
  7. // foo
  8. // foobar
复制代码
  .then()有返回值且返回值为另一个 Promise 对象的函数,也会使 Promise 继续·。与前者的区别在于,再次调用.then()时可能会触发的是异步操作,因此不是马上触发下一轮resolve()
  1. Promise.resolve('foo').then(function(s) {
  2.   return new Promise((resolve, reject) => {
  3.       console.log(s);
  4.       setTimeout(() => {
  5.           resolve(s + 'bar')
  6.         }, 1000);
  7.     });
  8. }).then(function(s) {
  9.   console.log(s);
  10. });
  11. // foo
  12. // foobar (在 "foo" 显示了 1s 后显示)
复制代码
  1. 2 Promise.all() 实现并发同步接收返回值
  2. 应用场景描述(你需要同时调多个接口的数据,并在前端对数据进行处理,这就需要等待所有接口返回数据后才能操作。)
复制代码
  1. // demo
  2. const promise1 = Promise.resolve(3);
  3. const promise2 = 42;
  4. const promise3 = new Promise((resolve, reject) => {
  5.   setTimeout(resolve, 100, 'foo');
  6. });
  7. Promise.all([promise1, promise2, promise3]).then((values) => {
  8.   console.log(values);
  9. });
  10. // expected output: Array [3, 42, "foo"]
复制代码
  Promise.all() 与 sync await区别
  1. //sync await   操作时间2秒
  2. async function Index2() {
  3.       console.time()
  4.       const p1 =await new Promise((resolve, reject) => {
  5.         console.log('这里是p1')
  6.         setTimeout(() => {
  7.           resolve('这里是p1的返回')
  8.         }, 1000)
  9.       })
  10.       const p2 =await new Promise((resolve, reject) => {
  11.         console.log('这里是p2')
  12.         setTimeout(() => {
  13.           resolve('这里是p2的返回')
  14.         }, 1000)
  15.       })
  16.       console.log(p1)
  17.       console.log(p2)
  18.       console.timeEnd()
  19.    }
  20.     Index2();
复制代码
  1. //  使用Promise.all()来实现调用。操作时间1秒
  2. function Index() {
  3.       console.time()
  4.       const p1 = new Promise((resolve, reject) => {
  5.         console.log('这里是p1')
  6.         setTimeout(() => {
  7.           resolve('这里是p1的返回')
  8.         }, 1000)
  9.       })
  10.       const p2 = new Promise((resolve, reject) => {
  11.         console.log('这里是p2')
  12.         setTimeout(() => {
  13.           resolve('这里是p2的返回')
  14.         }, 1000)
  15.       })
  16.       Promise.all([p1, p2]).then((val) => {
  17.         console.log(val)
  18.         console.timeEnd()
  19.       })
  20. }
复制代码


总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 04:32 , Processed in 0.074093 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表