Angularjs Promise笔记

2024年2月7日 180次阅读 来源: MichaelDuan

什么是promise
promise是一种用异步的方式处理值的方法，promise是对象，代表了一个函数最终可能的返回值或者抛出的异常，在与远程对象打交道时我们可以把他看作是远程对象的一个代理。 如果说是promise也是异步处理方式的一种，那么我们会想起它和XHR和$.ajax有啥区别呢？

 习惯上js使用闭包或者回调来相应非同步返回的数据，比如页面加载之后的XHR请求。我们可以跟数据进行正常交互，就好像它已经返回了一样，而不需要依赖回调函数的触发。

 那么ng提出的promise是为了解决什么问题呢？ 回调已经被使用了很长时间，通常如果有回调依赖其他回调时侯将会让调试变得非常艰难，每一步调用之后都需要显示处理错误。与之不同的是promise提供了另外一个抽象：这些函数返回promise对象。

 从一定层面上看ng改变的不是简单的改变代码风格，而是让我对一些思维习惯发起了反思和改善

为什么使用promise

promise是头等对象，自带了一些约定。

只有一个resolve或者reject会被调用到。
如果promise被执行或者被拒绝了，依赖于他们的处理程序仍然会被调用。
处理程序总是会被异步调用。

想要在angularjs中创建promise，可以使用内置的$q服务，$q服务在它的deferred API中提供了一些方法。

angular.module('ngApp',[]).
factory('UserInfoService',['$q',function($q){
    //code here
}])

要创建一个deferred对象，可以调用defer()方法；
var deferred= $q.defer();

deferred对象暴露了三个方法，以及一个可以用于处理promise的promise属性。

resolve(value)： deferred.resolve({name:”Kobe”,Age:36});
reject(reason)： deferred.reject(“Can’t update user”);
notify(value)。这个方法用promise的执行状态进行响应。　
then(successFn,errFn,notifyFn)。
catch(errFn)。
finally(callback)。finally允许我们观察promise的执行或者拒绝，而无需修改结果的值。通常就做一些资源的清理工作。

我们来看一个angularjs promise的对象解析：

demo.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title>demo</title>
</head>
<body>
    <div ng-controller="MainCtrl">{{user}}</div>
</body>
    <script type="text/javascript" src='./angular/angular.js'></script>
    <script type="text/javascript" src="controller.js"></script>
</html>
controller.js
var myapp = angular.module('myapp', []);

myapp.factory('UserInfoService',function($http, $q) {
        return {
            query: function() {
                var defer = $q.defer();//声明延后执行
                $http({
                    method: 'GET',
                    url: 'data/data.json'//获取json数据
                }).success(function(data, status, headers, config) {
                    defer.resolve(data);//执行成功
                }).error(function(data, status, headers, config) {
                    defer.reject();//执行失败
                });
                return defer.promise;//返回获取的数据
            }
        }
    });

myapp.controller('MainCtrl',function($scope, UserInfoService){
        var promise = UserInfoService.query(); //同步调用，获取promise的接口
        promise.then(function(data) {
            $scope.user = data; //调用接口，如果获取数据成功 resolve()方法
        }, 

        function(data) {
            $scope.user = {
                error: 'data was not found...'//如果获取数据失败，调用reject()方法
            };
        });
    });
要显示的数据:data.json
[{

    "id": "1",

    "firstname": "Misko",

    "lastname": "Havery",

    "company": "Google",

    "project": "AngularJS"

}, {

    "id": "2",

    "firstname": "Srini",

    "lastname": "Kusunam",

    "company": "LibertyLeap",

    "project": "Backbone.Paginator"

}, {

    "id": "3",

    "firstname": "Derick",

    "lastname": "Bailey",

    "company": "Muted Solutions",

    "project": "Backbone.Marionette"

}]
    原文作者：MichaelDuan
    原文地址: https://segmentfault.com/a/1190000003763981
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞