angularjs之interceptor(拦截器)

by: kelen / 2016-11-17

前言

angularjs作为前端优秀的框架,实现视图模型的交互外,还需要经常跟后台交互数据,这就涉及到http请求,http从请求到响应过程中,由于我们使用异步交互数据,无论是成功或者失败,都需要进行处理,给用户更友好的表现形式。我们可以在每一个service服务中对ajax请求做对应的处理,但随着项目的迭代,将会发现重复的代码太多,幸运的是,angularjs提供一个http拦截器,我们可以自定义,对响应的http请求进行处理。

angularjs的拦截器

angularjs自带的 $httpProvider 提供一个拦截器数组,我们可以定义一个拦截器放到改数组中去

例如定一个无操作的拦截器:

app.factory('myInterceptor', ['$q', '$log', function($q, $log) {
    $log.debug('注入成功');
    return {
        request: function (config) {      
            return config;
        },
        requestError: function (err) {
            $q.reject(err);
        },
        response: function (res) {
            return res;
        },
        responseError: function (err) {
            switch (err.status) {
                case -1:
                    // 远程无响应
                    break;
                case 404:
                    // 找不到资源
                    break;
                case 501:
                    // 服务器出错
                    break;
            }
            return $q.reject(err);
        }
    }
}]);

// 添加到$httpProvider的拦截器数组中
app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('myInterceptor')
}])

上面的拦截器,实现四个方法 request、requestError、response、responseError,request是在请求之前,可以在这里做一些数据处理,requestError函数,当有多个拦截器的时候,当前一个拦截器处理出错的时候,我们可以在这里恢复请求或者重新恢复配置,例如加载进度条,取消input框限制等等。

我们可以利用这四个方法实现一些功能:

  • 全局处理错误
  • 统一进行身份验证一类的处理
  • 对所有发出去的请求进行预处理
  • 对所有收到的响应进行预处理
  • 做一些增强用户体验的操作,例如显示一个进度条,提示错误信息框

 


最新发布
热门文章