`

JavaScript异步编程助手:Promise模式

 
阅读更多

文章源自:http://www.csdn.net/article/2013-08-12/2816527-JavaScript-Promise

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来操作异步是一种非常简单的方式,而且还可以简化你的代码,岂不是一举两得的好方法。

 

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    JavaScript设计模式+JavaScript模式+JavaScript异步编程

    3. **JavaScript异步编程**: 异步编程是JavaScript的重要特性,用于处理耗时操作,如网络请求和文件读写,以避免阻塞主线程。主要方法有: - 回调函数:最基础的异步处理方式,但可能导致回调地狱问题。 - 事件...

    Javascript异步编程(英文版)

    《JavaScript异步编程》这本书深入探讨了现代JavaScript开发中的关键主题——如何在不陷入混乱的情况下处理并发和并发任务。本书作者Trevor Burnham通过精确平衡的浏览器端和服务器端示例,为读者提供了一份简洁的...

    JavaScript异步编程的Promise模式

    ### JavaScript异步编程的Promise模式 #### 引言 随着Web技术的发展,特别是Web 2.0技术的应用,用户对网站交互性和响应速度的要求越来越高。在这种背景下,异步编程成为了现代Web开发中不可或缺的一部分。然而,...

    Javascript异步编程模型Promise模式具体介绍_.docx

    在JavaScript中,异步编程是不可或缺的一部分,尤其是在Web开发中,因为许多操作如...在JavaScript的世界里,Promise已经成为异步编程的标准实践,对于任何从事Web开发的程序员来说,掌握Promise模式都是非常必要的。

    JavaScript异步编程g.pdf

    本书《JavaScript异步编程》作为图灵程序设计丛书的一部分,主要介绍了异步处理的基本技巧,如PubSub(发布/订阅模式)、事件模式以及Promises(承诺对象)等。 在前端JavaScript中,PubSub是一种设计模式,允许将...

    详解JavaScript异步编程中jQuery的promise对象的作用_.docx

    详解JavaScript异步编程中jQuery的promise对象的作用 Promise 对象是 JavaScript 异步编程中的一种重要概念,特别是在 jQuery 库中。Promise 对象的主要作用是解决异步编程中的回调地狱问题,提供了一种简洁的方式...

    Javascript异步编程的4种方法

    ### JavaScript异步编程的四种方法 #### 概述 JavaScript是一种广泛使用的脚本语言,尤其在Web开发领域占据着核心地位。由于浏览器环境的限制,JavaScript最初被设计为单线程执行模型。这意味着在同一时间只能执行...

    《JavaScript异步编程》PDF版本下载.txt

    综上所述,《JavaScript异步编程》这本书详细介绍了JavaScript中异步编程的各种技术和最佳实践,包括但不限于回调函数、事件循环、Promise、async/await等核心概念和技术。通过学习本书,读者可以更好地理解和掌握...

    再谈JavaScript异步编程

    综上所述,JavaScript异步编程通过回调函数、发布/订阅模式、Promise以及Generator函数等技术不断发展,以支持更加复杂和高效的异步操作。这些技术的演变,使得前端开发人员能够更加优雅地处理异步任务,提高代码的...

    JavaScript异步编程学习

    博客中提到的“源码”和“工具”标签可能意味着作者深入探讨了JavaScript异步编程的实现原理,或者介绍了某些辅助开发的工具或库,比如Promise库bluebird或async/await的polyfill。代码文件可能包含了示例代码或练习...

    从回调函数到 AsyncAwait:JavaScript 异步编程进阶指南.pdf

    ### JavaScript异步编程知识点 #### 一、异步编程基础概念 - **定义**:异步编程是指在程序运行过程中,某段代码不阻塞主线程执行其他任务的能力。这在处理耗时操作如网络请求、文件读写时尤为重要。 - **同步与...

    JavaScript 异步编程设计快速响应的网络应用

    本文主要介绍了JavaScript异步编程设计的相关内容,为了构建快速响应的网络应用,文章深入探讨了异步编程的多种方法,并提供了实用的实践案例。异步编程是Web开发中的一个重要概念,它允许程序在等待耗时操作(如I/O...

    JavaScript异步编程Promise模式的6个特性

    Promise说起来是一个非常简单的概念,即使你没有机会...Promise是一个非常有价值的构造器,能够帮助你避免使用镶套匿名方法,而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性,希望对大家有帮助

    Javascript异步编程模型Promise模式详细介绍

    Promise 编程模式也被称为 thenable,可以理解为 延迟后执行。每个 Promise 都拥有一个叫做 then 的唯一接口,当 Promise 失败或成功时,它就会进行回调。它代表了一种可能会长时间运行而且不一定必须完成的操作结果...

    前端开发、JavaScript、asyncawait、异步编程、异常处理,学习JavaScript异步编程

    JavaScript中的异步编程是Web前端开发的核心技能,而async/await是现代JavaScript处理异步操作的一种优雅方式。这个模式使得代码更加清晰、易于理解和维护,尤其对于初学者来说,掌握async/await能大大提高开发效率...

    JavaScript异步回调的Promise模式封装实例

    JavaScript中的异步编程是Web开发中的核心挑战之一,特别是在处理如AJAX请求等I/O操作时。传统的异步回调方式虽然能实现非阻塞的执行,但随着代码复杂度增加,回调地狱(Callback Hell)问题逐渐暴露,使得代码难以...

    精通JavaScript动态网页编程:实例版

    这些新特性使得代码更简洁,可读性更强,并且支持更好的异步编程模式。 最后,文件D053477很可能包含了与上述知识点相关的代码示例、项目文件或练习,帮助你巩固所学知识,提高实际编程能力。在学习过程中,理论...

Global site tag (gtag.js) - Google Analytics