网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 Javascript异步编程模型Promise模式详细介绍
范文
    异步模式在 Web 编程中变得越来越重要，如何处理异步请求后的操作是一件麻烦事。Promise 是一种异步编程模型，术语称作 Deferred 模式，它通过一组API来规范化异步操作，让异步操作的流程控制更加容易。
    Promise 编程模式也被称为 thenable，可以理解为 延迟后执行。每个 Promise 都拥有一个叫做 then 的唯一接口，当 Promise 失败或成功时，它就会进行回调。它代表了一种可能会长时间运行而且不一定必须完成的操作结果。这种模式不会阻塞和等待长时间的操作完成，而是返回一个代表了承诺的（promised）结果的对象。
    当前的许多 JavaScript 库（如 jQuery 和 Dojo、AngularJS）均添加了这种称为 Promise 的抽象。通过这些库，开发人员能够在实际编程中使用 Promise 模式。
    下面我们将以 jQuery 为例讨论 JavaScript 库是如何使用 Promise 模式的来处理异步的，其实就是通过回调的方式提供容错支持。在某个操作成功或失败或任何情况下都执行对应的回调，尽量把某段逻辑可能出现的情况都 handle 住。
    首先让我们来看看 jQuery 一般是如何操作的：
    代码如下:
    var $info = $("#info");
    $.ajax({
    url:"/echo/json/",
    data: { json: JSON.stringify({"name": "someValue"}) },
    type:"POST",
    success: function(response)
    {
    $info.text(response.name);
    }
    });
    在这个例子中，你可以看到当设置成功后会指定一个回调，是一种很好的回调方式，这并不是 Promise，jQuery 官方文档也不再推荐这种方式（http://api.jquery.com/jQuery.ajax/#jqXHR）。 当 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);
    });
    jQuery 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 里，无论成功还是失败，我们都会使用一个调用来指定我们想要调用的。
    其实这里也可以这样来写，这也是 jQuery 官方文档里推荐的方法：
    代码如下:
    var $info = $("#info");
    $.ajax({
    // Change URL to see error happen
    url: "/echo/json/",
    data: {
    json: JSON.stringify({
    "name": "someValue"
    })
    },
    type: "POST"
    })
    .done(function (response) {
    // success
    $info.text(response.name);
    }).fail(function () {
    // failure
    $info.text("bad things happen to good developers");
    })
    .always(function () {
    $info.append("...finally");
    });
    下面再来看看 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 来操作异步是一种非常简单的方式，而且还可以简化你的代码，确实是一举两得的好方法。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/22 9:04:16