深入了解JavaScript Promise

 更新时间:2021年12月28日 10:15:28   作者:Dormiveglia-flx  
这篇文章主要为大家介绍了JavaScript Promise,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

一 什么是 Promise?

一个 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 如何解决 callback hell?

.then()没有返回值的函数,会使得 Promise 链不再延续,此时你再往后面调用 .then() 是没有作用的。

Promise.resolve('foo').then(function(s) {
  console.log(s);
}).then(function(s) {
  // Never executed
  console.log(s);
});

.then()中有返回值函数,会使 Promise 链可以继续

Promise.resolve('foo').then(function(s) {
  console.log(s);
  return s + 'bar';
}).then(function(s) {
  console.log(s);
});

// foo
// foobar

.then()有返回值且返回值为另一个 Promise 对象的函数,也会使 Promise 继续·。与前者的区别在于,再次调用.then()时可能会触发的是异步操作,因此不是马上触发下一轮resolve()

Promise.resolve('foo').then(function(s) {
  return new Promise((resolve, reject) => {
      console.log(s);
      setTimeout(() => {
          resolve(s + 'bar')
        }, 1000);
    });
}).then(function(s) {
  console.log(s);
});


// foo
// foobar (在 "foo" 显示了 1s 后显示)

2 Promise.all() 实现并发同步接收返回值
应用场景描述(你需要同时调多个接口的数据,并在前端对数据进行处理,这就需要等待所有接口返回数据后才能操作。)

// demo
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});
 
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

Promise.all() 与 sync await区别

//sync await   操作时间2秒
async function Index2() {
      console.time()
      const p1 =await new Promise((resolve, reject) => {
        console.log('这里是p1')
        setTimeout(() => {
          resolve('这里是p1的返回')
        }, 1000)
      })
      const p2 =await new Promise((resolve, reject) => {
        console.log('这里是p2')
        setTimeout(() => {
          resolve('这里是p2的返回')
        }, 1000)
      })
      console.log(p1)
      console.log(p2) 
      console.timeEnd()
   }
    Index2();

在这里插入图片描述

//  使用Promise.all()来实现调用。操作时间1秒
 function Index() {
      console.time()
      const p1 = new Promise((resolve, reject) => {
        console.log('这里是p1')
        setTimeout(() => {
          resolve('这里是p1的返回')
        }, 1000)
      })
      const p2 = new Promise((resolve, reject) => {
        console.log('这里是p2')
        setTimeout(() => {
          resolve('这里是p2的返回')
        }, 1000)
      })
      Promise.all([p1, p2]).then((val) => {
        console.log(val)
        console.timeEnd()
      })
}

在这里插入图片描述

总结

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

相关文章

  • JS promise解决异步问题过程详解

    JS promise解决异步问题过程详解

    Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息
    2023-04-04
  • 两个函数相互调用如何防止死循环

    两个函数相互调用如何防止死循环

    这篇文章主要介绍了两个函数相互调用如何防止死循环问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • JavaScript防抖与节流超详细全面讲解

    JavaScript防抖与节流超详细全面讲解

    在开发中我们经常会遇到一些高频操作,比如:鼠标移动,滑动窗口,键盘输入等等,节流和防抖就是对此类事件进行优化,降低触发的频率,以达到提高性能的目的。本文就教大家如何实现一个让面试官拍大腿的防抖节流函数,需要的可以参考一下
    2022-10-10
  • JavaScript iframe 实现多窗口通信实例详解

    JavaScript iframe 实现多窗口通信实例详解

    这篇文章主要为大家介绍了JavaScript iframe 实现多窗口通信实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素

    IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示

    多数情况下隐藏(设置display:none)一个元素,无需依次将其内的所有子元素都隐藏。非要这么做,有时会碰到意想不到的bug。
    2011-07-07
  • JavaScript之instanceof方法手写示例详解

    JavaScript之instanceof方法手写示例详解

    这篇文章主要为大家介绍了JavaScript之instanceof方法手写示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • JavaScript代码生成PDF文件的方法

    JavaScript代码生成PDF文件的方法

    如何使用js生成pdf文件呢,下面通过本文给大家分享JavaScript代码生成PDF文件的方法,需要的朋友参考下吧
    2016-02-02
  • JavaScript canvas实现流星特效

    JavaScript canvas实现流星特效

    这篇文章主要为大家详细介绍了JavaScript canvas实现流星特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 开发用到的js封装方法(20种)

    开发用到的js封装方法(20种)

    在本问中我们给大家总结了20种开发中常用到的JS封装方法,有需要的读者们可以学习下。
    2018-10-10
  • 微信小程序实现数字滚动动画

    微信小程序实现数字滚动动画

    这篇文章主要为大家详细介绍了微信小程序实现数字滚动动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论