请选择 进入手机版 | 继续访问电脑版

HTML5星空

3分钟简单温故Promise

[复制链接]
发表于 2020-6-28 22:40:11 | 显示全部楼层 |阅读模式

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Promise 对象:表示异步操作的最终状态(完成或失败)以及结果。


提到Promise,就不得不提及jQuery-1.5.0版本及之后引入的Deferred对象,它是jQ对回调函数的解决方案,为如今规范的Promise对象奠定了实践基础。

示例:

  1. // deferred对象未出现之前

    $.ajax({

  2.  // ...

  3.  success: function(res) {

    1. // do something

  4.  },

  5.  error: function() {

  6.    // when error occur ..

  7.  }

  8. })


  9. // 使用deferred对象

  10. $.ajax(url)

  11.  .done(res => {

  12.    // todos

  13.  })

  14.  .fail(() => {

  15.    // handle exception

  16.  })

  17.  .always(() => {

  18.    // final

  19.  })

Promise是一种更强大的异步回调解决方案,它保存着异步操作的执行结果,以便做后续的相关处理。不仅从很大程度上解决了“回调地狱”的问题,也能更好地控制异步流程以达到预期目的。

相关代码:

  1. // 返回Promise对象的函数

  2. function imitation(state = 0) {

  3.  var promise = new Promise((resolve, reject) => {

  4.    if (state === 0) {

  5.      // Promise.resolve(result)

  6.      resolve('Success')

  7.    } else {

  8.      // Promise.reject(reason)

  9.      reject('Fail')

  10.    }

  11.  })

  12.  return promise

  13. }


  14. var ifSucc = function (value) {

  15.  console.log(value)

  16. }

  17. var ifFail = function (reason) {

  18.  console.log(reason)

  19. }

  20. var noMatterSuccOrFail = function () {

  21.  console.log('finally')

  22. }


  23. var promise = imitation()


  24. // promise 会存在三种状态:pending(初始) fulfilled(成功/完成) rejected(失败)

  25. // Promise.prototype.then

  26. // 1. then可以接受两个参数:成功handler和失败handler

  27. promise

  28.  .then(ifSucc, ifFail)


  29. // 2. 由catch处理失败的情况,then只接受成功的handler

  30. promise

  31.  .then(ifSucc)

  32.  .catch(err => {

  33.    console.log(err)

  34.  })


  35. // 3. 当无论状态是fulfilled或者是rejected,都需要执行一段代码时,就要用到finally

  36. promise

  37.  .then(ifSucc)

  38.  .catch(err => {

  39.    console.log(err)

  40.  })

  41.  .finally(noMatterSuccOrFail)


Promise.all和Promise.race的区别

  1. // Promise.all([...promises])

  2. // 当接受到的promises数组里面的promise全部完成后,执行SuccHandle(不要在意这个英文名)

  3. Promise.all([...promises])

  4.  .then(results => {

  5.    console.log(results[0], results[1], results[2] /*, and more */)

  6.  })


  7. // Promise.race([...promises])

  8. // 当接受到的promises数组里面的任意一个完成后,执行SuccHandle

  9. Promise.race([...promises])

  10.  .then(result => {

  11.    console.log(result)

  12.  })

以上 _


回复

使用道具 举报

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

本版积分规则

更多资源及Java+大数据个人原创视频,
可关注本站官方公众号观看:
快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-7-11 03:45 , Processed in 0.382554 second(s), 36 queries .

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