阅读更多

Promises是一种令代码异步行为更加优雅的抽象,它很有可能是JavaScript的下一个编程范式,一个Promise即表示任务结果,无论该任务是否完成。

异步模式在Web编程中变得越来越重要,对于Web主流语言JavaScript来说,这种模式实现起来不是很利索,为此,许多JavaScript库(比如 jQuery和Dojo、AngularJS)添加了一种称为Promise的抽象(术语称作Deferred模式)。通过这些库,开发人员能够在实际编程中使用Promise模式,每个Promise都拥有一个叫做then的唯一接口,当Promise失败或成功时,它就会进行回调。它代表了一种可能会长时间运行而且不一定必须完成的操作结果。这种模式不会阻塞和等待长时间的操作完成,而是返回一个代表了承诺的(promised)结果的对象。

本文我们将讨论JavaScript库(比如jQueryAngularJS)是如何使用Promise模式的来处理异步的,其实就是通过回调的方式提供容错支持。

下面让我们来看看jQuery是如何操作的:

var $info = $("#info");
$.ajax({
    url:"/echo/json/",
    data: { json: JSON.stringify({"name": "someValue"}) },
    type:"POST",
    success: function(response)
    {
       $info.text(response.name);
    }
});

在这个例子中,你可以看到当设置成功后会指定一个回调,这并不是Promise,但却是一种很好的回调方式。当Ajax调用完成后,它便会执行success函数。根据库所使用的异步操作,你可以使用各种不同的回调(即任务是否成功,都会进行回调,做出响应)。使用Promise模式会简化这个过程,异步操作只需返回一个对象调用。这个Promise允许你调用一个叫做then的方法,然后让你指定回调的function(s),下面让我们来看看jQuery是如何使用Promise的:

var $info = $("#info");
$.ajax({
    url: "/echo/json/",
    data: {
        json: JSON.stringify({
            "name": "someValue"
        })
    },
    type: "POST"
})
.then(function (response) {
    $info.text(response.name);
});

有趣的是,ajax对象返回xhr对象实现Promise模式,所以我们可以调用then方法,并且根据不同的情形返回不同的值,如下所示:

var $info = $("#info");
$.ajax({
    url: "/echo/json/",
    data: {
        json: JSON.stringify({
            "name": "someValue"
        })
    },
    type: "POST"
})
.then(function (response) {
    $info.text(response.name);
})
.then(function () {
    $info.append("...More");
})
.done(function () {
    $info.append("...finally!");
});

由于许多库都开始采用Promise模式,所以异步操作会变的非常容易。但如果站在相反的角度思考,Promise将会是什么样子的呢?其中一个非常重要的模式是函数可以接受两种功能,一个是成功时的回调,另一个是失败时的回调。

var $info = $("#info");
$.ajax({
    
// Change URL to see error happen
    url: "/echo/json/",
    data: {
        json: JSON.stringify({
            "name": "someValue"
        })
    },
    type: "POST"
})
.then(function (response) {
    
// success
    $info.text(response.name);
},
function () {
    
// failure
    $info.text("bad things happen to good developers");
})
.always(function () {
    $info.append("...finally");
});

需要注意的是,在jQuery里,无论成功还是失败,我们都会使用一个调用来指定我们想要调用的。下面让来看看AngularJS是如何使用Promise模式的:

var m = angular.module("myApp", []);
m.factory("dataService", function ($q) {
    function _callMe() {
        var d = $q.defer();
        setTimeout(function () {
            d.resolve();
            
//defer.reject();
        }, 100);
        return d.promise;
    }
    return {
        callMe: _callMe
    };
});
function myCtrl($scope, dataService) {
    $scope.name = "None";
    $scope.isBusy = true;
    dataService.callMe()
      .then(function () {
        
// Successful
        $scope.name = "success";
      },
      function () {
        
// failure
        $scope.name = "failure";
      })
      .then(function () {
        
// Like a Finally Clause
        $scope.isBusy = false;
      });
}

你可以在JSFiddle里试试这些例子,并且看看会产生哪些效果。使用Promise来操作异步是一种非常简单的方式,而且还可以简化你的代码,岂不是一举两得的好方法。

更多关于Promise的介绍及示例,可以前往官网查看

via:JavaScript Promise

来自: csdn
3
0
评论 共 5 条 请登录后发表评论
5 楼 bee1314 2013-08-15 08:35
then(success, fail) 进行回调,还有两种快捷的方式就是.done(callback).fail(callback)
4 楼 coca 2013-08-14 10:40
windows 8 app开发大量用到这个模式
3 楼 dsjt 2013-08-14 09:24
把回调处理封装了成对象。
很有用处的。
2 楼 kobe1029 2013-08-14 08:49
这写得不是很详细
1 楼 kingxip 2013-08-14 08:09
这不是蛋疼吗?

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • JavaScript异步编程助手:Promise模式

    JavaScript异步编程助手:Promise模式 异步模式在Web编程中变得越来越重要,对于Web主流语言JavaScript来说,这种模式实现起来不是很利索,为此,许多 JavaScript库(比如 jQuery和Dojo、AngularJS)添...

  • JavaScript异步编程助手:Promise模式 【转】

    异步模式在Web编程中变得越来越重要,对于Web主流语言JavaScript来说,这种模式实现起来不是很利索,为此,许多 JavaScript库(比如 jQuery和Dojo、AngularJS)添加了一种称为Promise的抽象(术语称作Deferred模式)...

  • [转载]JavaScript异步编程助手:Promise模式

    http://www.csdn.net/article/2013-08-12/2816527-JavaScript-Promise ... 摘要:Promises是一种令代码异步行为更加优雅的抽象,它很有可能是JavaScript的下一个编程范式,...

  • JavaScript编程异步助手:Promise

    异步模式在Web编程中变得越来越重要,对于Web主流语言JavaScript来说,这种模式实现起来不是很利索,为此,许多JavaScript库(比如 jQuery和Dojo、AngularJS)添加了一种称为Promise的抽象(术语称作Deferred模式)。...

  • 函数式编程 模式_函数式编程模式:食谱

    函数式编程 模式This article targets an audience that’s graduating from functional libraries like ramda to using Algebraic Data Types. We’re using the excellent crocks library for our ADTs and ...

  • 什么是显式promise构造反模式,如何避免呢?

    有人告诉我这分别称为“ 延迟反模式 ”或“ Promise构造函数反模式 ”,这段代码有什么不好之处,为什么又将其称为反模式 ? #1楼 参考:https://stackoom.com/question/1bsRL/什么是显式promise构造反模式-如何...

  • 异步height:calc_异步:不仅仅是承诺(第二部分)

    这是一个由多个部分组成的博客文章系列,重点介绍了异步的功能, 异步是一种基于Promise的流控制抽象实用程序。 第1部分:您尚不知道的承诺 第2部分:不仅仅是承诺 异步是应许 正如我们在第1部分中所...

  • 在 Dart 和 Flutter 中探索异步编程

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-spjBBuit-1621559545716)...老铁记得 转发 ,猫哥会呈现更多 Flutter 好文~~~~ 微信 flutter 研修群 ducafecat 原文 https://m

  • 现代化程序开发笔记(11)——异步编程杂谈

    在这篇文章中,我将以我的理解从头开始梳理一遍异步编程。 从网络IO开始 作为一个服务器程序,最重要的就是维护网络的IO。我们知道,一个TCP连接对应一个TCP套接字,服务器程序需要做的,就是妥善处理这些套接字中的...

  • javascript中对象_了解JavaScript中的承诺

    我向您承诺,到本文结束时,您将更好地了解JavaScript。 我与JavaScript有一种“爱与恨”的关系。 但是尽管如此,JavaScript一直吸引着我。 在过去的10年中从事Java和PHP的工作之后,JavaScript看起来非常不同,但...

  • JavaScript 资源大全中文版

    包管理器 ...官网component:能构建更好 web 应用的客户端包管理器。官网spm:全新的静态包管理器。官网jam:一个专注于浏览器端和兼容 RequireJS 的包管理器。官网jspm:流畅的浏览器包管理器。官

  • JavaScript库资源

    component - 用于构建更好的Web应用程序的客户端包管理。 spm - 全新的静态包管理器。 jam - 使用以浏览器为中心且与RequireJS兼容的存储库的包管理器。 jspm - 无摩擦浏览器包管理。 恩德 - 无库图书馆。 ...

  • 提升开发效率:npm包管理器的使用技巧

    npm是Node.js官方提供的包管理工具,它可以帮助我们轻松地安装、共享和管理JavaScript代码。通过npm,我们可以快速地找到所需的库和模块,从而提高开发效率。同时,npm还提供了一个庞大的开发者社区,让我们可以轻松...

  • javascript异步处理与Jquery的deferred对象总结

    promise()返回的promise对象,它相当于Deferred对象的副本,不允许开发者通过promise对象修改Deferred对象状态 Insert title here $(function(){ /* //$.ajax() 返回一个deferred对象 (1.5版本...

  • 使用ChatGPT-4优化编程效率:高效查询代码示例和解决方案

    在JavaScript中,如何使用Promise处理异步? 在GCP中,如何设置一个Kubernetes集群? 如何在SQL中实现分页查询? 在Vue.js中,如何使用Vuex进行状态管理? 如何在Electron中创建一个桌面应用? 在Next.js中,如何...

  • scrap_Web Scrap Scotch:节点方式

    因此,如果您已经对函数式编程概念有事先的了解,那么您的情况就会更好。 您可以在此处了解有关函数式编程概念的更多信息。 核心依赖 (Core Dependencies) Before you begin, ensure that you have Node and npm or...

  • 菜鸟教程 之 JavaScript 教程、http 库 Axios

    JavaScript 是 Web 的编程语言,也是一种轻量级的编程语言。所有现代的 HTML 页面都使用 JavaScript。 JavaScript 可以嵌入到 HTML 页面。在 HTML 页面中插入 JavaScript 时使用 标签。 和 会告诉 JavaScript 在何处...

  • 基于STC32单片机内部RTC的学习计时器+全部资料+详细文档(高分项目).zip

    【资源说明】 基于STC32单片机内部RTC的学习计时器+全部资料+详细文档(高分项目).zip基于STC32单片机内部RTC的学习计时器+全部资料+详细文档(高分项目).zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

  • 2023新型智慧城市智慧交通专项设计方案[498页Word].docx

    2023新型智慧城市智慧交通专项设计方案[498页Word].docx

  • QT开发的概要介绍与分析

    QT开发资源描述 QT是一款功能强大的跨平台应用程序和用户界面开发框架,广泛应用于各种软件项目的开发中。QT提供了丰富的库和工具,使得开发者能够高效地创建出具有专业外观和优秀用户体验的应用程序。 QT开发资源涵盖了从界面设计到后台逻辑实现的全流程。在界面设计方面,QT提供了强大的Qt Designer工具,支持拖拽式布局和丰富的控件库,使得开发者能够直观地设计复杂的用户界面。同时,QT还支持样式表(QSS)和自定义绘图,让界面更加美观和个性化。 在后台逻辑实现方面,QT提供了完整的C++ API,支持多线程、网络编程、数据库访问等功能。开发者可以利用QT的类库和框架,快速实现各种复杂的功能模块。此外,QT还提供了丰富的文档和社区支持,使得开发者在遇到问题时能够迅速找到解决方案。 QT的跨平台特性是其最大的优势之一。开发者只需编写一次代码,就可以在不同的操作系统和平台上运行应用程序。这使得QT成为开发跨平台桌面应用、移动应用和嵌入式系统的理想选择。 总之,QT开发资源为开发者提供了一套完整、高效、易用的开发工具链。通过利用QT提供的丰富资源和强大功能,开发者可以快速构建出高质量

Global site tag (gtag.js) - Google Analytics