AngularJS中的Promise

素颜马尾好姑娘i 2022-08-06 12:16 171阅读 0赞

一.Promise

Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。

为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件：

var currentProfile = null;
    var username = 'something';
    
    fetchServerConfig(function(serverConfig) {
     fetchUserProfiles(serverConfig.USER_PROFILES, username,
     function(profiles) {
     currentProfile = profiles.currentProfile;
    });
    });

上面这种处理方式存在一些问题：

1.对于代码缩进来说，这种代码就是一个噩梦，尤其在你需要链式调用很多次的时候；

2.处于回调和函数之间的错误报告非常容易丢失，除非你在每一个步骤中都手动处理错误；

3.如果需要使用currentProfile对象来做一些事情，那么你需要在最内层的回调中封装真正想要实现的逻辑，要么直接封装，要么通过一个单独的函数来封装。

Promise机制可以很好地解决这些问题。在深入了解其运行机制之前，我们来看看如何使用promise实现同样的事情：

使用promise机制的优点如下：

1.可以对函数进行链式调用，所以你不会陷入代码缩进噩梦中；

2.在调用链的过程中，可以保证上一个函数调用完成之后才会调用下一个函数；

**3.每一个then()调用都带有两个参数（两个都是函数）。第一个是成功之后的回调，第二个是出错之后的处理器；**

4.如果调用链中出现了错误，错误将会被冒泡传递到其余的错误处理函数中。所以，最终来说，所有错误都可以在任意一个回调函数中进行处理。

你可能会问，resolve(解决)方法和reject(拒绝)方法又是什么呢？在AngularJS中，延迟调用是实现promise的一种方式。调用resolve方法将会填充promise(也就是调用success处理函数)，而调用reject方法将会调用promise的错误处理函数。

**二.$q和Promise**

Promise接口是AngularJS组织API的基础，从根本上讲，Promise接口从以下方面对异步请求做了规范：

a.异步请求**返回一个promise**，而不是返回具体值；

b.Promise带有一个then函数，这个函数有两个参数：第一个参数是处理"resolved"和"sucess"事件的函数；第二个参数是处理"rejected"和"failure"事件的函数。调用这两个函数时将会把结果或者拒绝的原因作为参数传递进去；

c.只要返回结果是合法的，接口就可以保证这两个函数中的一个会被调用。

**  大多数deferred/Q实现都会遵守以上方式，但是AngularJS的实现比较特殊，**原因如下：

a.AngularJS知道$q的存在，所以$q会被整合到作用域模型中去。这样可以使解析时的传递速度更快，并且可以减少UI的闪烁和刷新；

b.AngularJS的模板也认识$q，这样一来，接口的内容就可以被当作最终结果值（而不是当作promise）来对待，然后等获取结果之后再通知promise；

c.体积更小，因为对于常用的异步任务来说，AngularJS只实现了它们所需要的最基本、最重要的功能。

我们来看一段代码：

fetchUser(function(user) {
     fetchUserPermissions(user, function(permissions) {
     fetchUserListData(user, permissions, function(list) {
    //对你想要显示的数据列表做一些处理
    });
    });
    });

使用JavaScript时，人们经常会抱怨这种可怕的、金字塔的代码缩进噩梦。从本质上来说，异步返回的方式和程序的同步处理之间存在冲突，从而导致了多重嵌套的函数，这样就更难跟踪到当前的上下文了。

另外，对错误的处理也存在同样的问题。处理错误的最佳方式是什么？你会在每一个步骤中都处理错误吗？那样会把代码搞得一团糟。

为了解决这一问题，Promise方案提供了then的概念，在成功的情况下会执行一个函数，在出错的情况下执行另一个函数，两个函数都可以进行链式调用。所以，对于上面这段代码，如果使用Promise API（至少使用AngularJS的实现），可以这样展开：

整个金字塔式的代码就被很好的平坦化了，并且提供了链式的作用域，以及一个单一的出错处理点。你可以在应用中使用同样的代码来处理异步调用，只要导入AngularJS的$q服务即可。

**三.拦截响应**

Promise机制还可以做一些非常酷的事情：拦截响应。

我们已经学过的内容有：向服务端发送请求、处理响应、把响应很好地包装成抽象的东西及处理异步调用。但是在真实的应用中，对于每一次服务端调用，最终还必须做一些通用的操作，例如错误处理、鉴权以及其他安全方面的处理（例如剪裁数据）。

在深入理解了$q接口之后，我们就可以使用拦截响应的方式来处理以上所有任务了。响应拦截的机制允许我们在响应到达应用之前对其进行拦截，并在上面进行一些操作，例如转换数据形式、处理错误等所有你能想到的操作。

下面来看一个例子，它会拦截响应，然后做一些很小的数据转换操作。

//把拦截器注册为一个服务
    myModule.factory('myInterceptor', function($q, notifyService, errorLog) {
     return function(promise) {
     return promise.then(function(response) {
    //什么都不做
     return response;
     }, function(response) {
    //notify服务将会使用错误信息来刷新UI
    notifyService(response);
    //同时把错误信息打印到控制台，以便调试
    errorLog(response);
     return $q.reject(response);
    });
    }
    });
    
    //确保我们所创建的拦截器是拦截器链的一部分
    $httpProvider.responseInterceptors.push('myInterceptor');