浅析angularjs http拦截器

来公司接近一个月了，今天在自学的过程中对网页中的载入界面产生了好奇，查阅了几篇博客后发现是与http拦截器有关，写这篇文章做出梳理，方便日后查看也与大家探讨。

参考链接：https://www.cnblogs.com/ifykwf/p/6043459.html

对于拦截器的定义，在这里我就不赘述了，大体就是在request前，和response后截断请求响应信息做预处理功能，例如：添加加载页面，验证请求人身份，加入token等。angularjs中$http的拦截是由$httpProvider服务提供的。其提供有四种方法，分别为：

 request: function (config) {
            console.log(config)
            return config;
        },
        requestError: function (err) {
            return $q.reject(err);
        },
        response: function (res) {
            console.log(res)
            return res;
        },
        responseError: function (err) {
            if (-1 === err.status) {
                // 远程服务器无响应
            } else if (500 === err.status) {
                // 处理各类自定义错误
            } else if (501 === err.status) {
                // ...
            }
            console.log($q.reject(err))
            return $q.reject(err);
        }

以上的四种方法分别对应请求成功失败，响应成功失败。看似挺简单的操作，但是我在学习的过程中也遇到了许多的坎，现与大家一起分享。

正确：

app.service('HttpInterceptor',function ($q) {
            return  {
                request: function (config) {
                    console.log(config)
                    return config;
                },
                requestError: function (err) {
                    return $q.reject(err);
                },
                response: function (res) {
                    console.log(res)
                    return res;
                },
                responseError: function (err) {
                    if (-1 === err.status) {
                        // 远程服务器无响应
                    } else if (500 === err.status) {
                        // 处理各类自定义错误
                    } else if (501 === err.status) {
                        // ...
                    }
                    return $q.reject(err);
                }
            }
    })

以上是一段正确封装的HttpInterceptor服务，经过我的验证是没有问题的。以下看另一端类似的错误代码。

错误：

app.factory('HttpInterceptor',function ($q) {
        return {
            HttpInterceptor:function(){
                return {
            request: function (config) {
                console.log(config)
                return config;
            },
            requestError: function (err) {
                return $q.reject(err);
            },
            response: function (res) {
                console.log(res)
                return res;
            },
            responseError: function (err) {
                if (-1 === err.status) {
                    // 远程服务器无响应
                } else if (500 === err.status) {
                    // 处理各类自定义错误
                } else if (501 === err.status) {
                    // ...
                }
                return $q.reject(err);
            }
        }
        }
        }
    });

再补上我的配置模块如下：

module.config(['$httpProvider',function ($httpProvider) {
           $httpProvider.interceptors.push('Httpinterceptor');
}]);

博主思考了很久才发现端倪，问题是在