阅读更多

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 教程、json、jsonp

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

  • Tobit与Probit模型Stata实现代码-最新发布.zip

    Tobit与Probit模型Stata实现代码-最新发布.zip

  • 供AI训练的中文数据集持续更新与AI公司图谱目前的数据集餐饮行业8000问百度知道Alpaca中文数据集计算机领域数据.zip

    Jupyter-Notebook

  • 红警单机版(单机游戏)

    红警单机版(单机游戏)

Global site tag (gtag.js) - Google Analytics