jQuery promise

上一节通过一些代码演示,知道了 jquery 的deferred对象是解决了异步中callback函数的问题,但是

本节使用的代码参见这里

本节内容概述

  • 返回promise
  • 返回promise的好处
  • promise 的概念

返回promise

我们对上一节的的代码做一点小小的改动,只改动了一行,下面注释。

function waitHandle() {
    var dtd = $.Deferred()
    var wait = function (dtd) {
        var task = function () {
            console.log('执行完成')
            dtd.resolve()
        }
        setTimeout(task, 2000)
        return dtd.promise()  // 注意,这里返回的是 primise 而不是直接返回 deferred 对象
    }
    return wait(dtd)
}

var w = waitHandle() // 经过上面的改动,w 接收的就是一个 promise 对象
$.when(w)
 .then(function () {
    console.log('ok 1')
 })
 .then(function () {
    console.log('ok 2')
 })

改动的一行在这里return dtd.promise(),之前是return dtddtd是一个deferred对象,而dtd.promise就是一个promise对象。

promise对象和deferred对象最重要的区别,记住了————promise对象相比于deferred对象,缺少了.resolve.reject这俩函数属性。这么一来,可就完全不一样了。

上一节我们提到一个问题,就是在程序的最后一行加一句w.reject()会导致乱套,你现在再在最后一行加w.reject()试试 ———— 保证乱套不了 ———— 而是你的程序不能执行,直接报错。因为,wpromise对象,不具备.reject属性。

返回promise的好处

上一节提到deferred对象有两组属性函数,而且提到应该把这两组彻底分开。现在通过上面一行代码的改动,就分开了。

  • waitHandle函数内部,使用dtd.resolve()来该表状态,做主动的修改操作
  • waitHandle最终返回promise对象,只能去被动监听变化(then函数),而不能去主动修改操作

一个“主动”一个“被动”,完全分开了。

promise 的概念

Js中文网周刊 - 领略前端技术前沿 一个收集JavaScript 新闻和精选文章的周刊

jquery v1.5 版本发布时间距离现在(2017年初春)已经老早之前了,那会儿大家网页标配都是 jquery 。无论里面的deferredpromise这个概念和想法最早是哪位提出来的,但是最早展示给全世界开发者的是 jquery ,这算是Promise这一概念最先的提出者。

其实本次课程主要是给大家分析 ES6 的Promise Generatorasync-await,但是为何要从 jquery 开始(大家现在用 jquery 越来越少)?就是要给大家展示一下这段历史的一些起点和发展的知识。有了这些基础,你再去接受最新的概念会非常容易,因为所有的东西都是从最初顺其自然发展进化而来的,我们要去用一个发展进化的眼光学习知识,而不是死记硬背。

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

results matching ""

    No results matching ""