什么是 $http 拦截器
在 AngularJS 中，$http 是用于向服务器发起 HTTP 请求的服务，可以用来获取数据、提交表单等等。$http 拦截器是 AngularJS 提供的一种机制，可以在发送请求和获取响应的过程中拦截一些操作，例如修改请求头、添加参数、修改响应等。
$http 拦截器的作用
$http 拦截器可以用于以下场景：
- 添加公共请求头或请求参数；
- 拦截请求或响应，做出统一的处理；
- 在登录过期或者未登录的情况下，统一跳转到登录页面。
$httpProvider.interceptors
$httpProvider.interceptors 是 AngularJS 中用来注册 $http 拦截器的方法，可以为 $http 添加一些全局的拦截器。$httpProvider.interceptors 是一个 $injector，可以被其他模块作为依赖注入。
例如：
-- -------------------- ---- -------
----------------------- ---
----------------------------------- -
------ -
-- -------
-------- ---------------- -
-- ----
------ -------
--
-- -------
--------- ------------------ -
-- ----
------ ---------
-
--
--
---------------- --------------- -
-------------------------------------------------
---在上面的代码中，我们先定义了一个名为 myInterceptor 的拦截器，该拦截器在请求发送前和请求发送后都会拦截，并进行一些处理。然后我们通过 $httpProvider.interceptors 属性将该拦截器添加到了 $http 的全局拦截器列表中。
拦截器中可用的方法
在拦截器中，我们可以使用以下四个函数来对请求或响应进行处理：
- request(config)： 发送请求前的拦截操作，可以修改配置对象 config；
- requestError(rejection)： 请求发送失败的操作，可以注入错误原因 rejection；
- response(response)： 响应成功时的操作；
- responseError(rejection)： 响应失败时的操作。
拦截器的执行顺序和注意点
在 $http 请求和响应的过程中，拦截器的执行顺序如下：
request拦截器先执行 => 请求发送后响应拦截器顺序执行，成功顺序与拦截器添加顺序相反，失败相同 => then 和 catch 回调中执行
需要注意的是，如果拦截器中的 request 方法返回了一个 promise 对象，那么后续的拦截器和请求就会终止，并等待这个 promise 对象的决议。并且如果该 promise 对象是被拒绝的，则会直接调用 responseError 方法。
示例代码
下面是一个拦截请求中添加 token 和处理响应的示例：
-- -------------------- ---- -------
----------- -
---- --------
-------
----------------
------------------------- ----------------------- -
------ -
-------- ---------------- -
-- -- -----
--- ----- - --------------------
-- ------- -
-- ------ -----
------------------------------- - ------- - - ------
-
------ -------
--
--------- ------------------ -
-- ------
------ --------------
-
--
---
-----在这个示例中，我们定义了一个名为 myInterceptor 的拦截器，它会在请求发送前检查 localStorage 中是否有 token，如果有则向请求头添加对应的 Authorization 字段，用于后端验证用户身份。同时，它还会在获取到响应之后，返回响应数据的 data 字段，方便我们在 then 回调中使用。最后，我们通过 $httpProvider.interceptors 属性将该拦截器添加到了 $http 的全局拦截器列表中。
$http.get('/api/user')
.then(function(response) {
$scope.userInfo = response;
}, function(error) {
console.log('获取用户数据失败');
});在这个示例中，我们向 /api/user 发送了一个 GET 请求，并在 then 回调中对响应进行处理。由于在上面的代码中，我们已经定义了一个拦截器，在返回响应数据时会返回 data 字段，所以这里的 response 就是我们在拦截器中返回的数据。
总结
$http 拦截器是 AngularJS 提供的一种机制，可以在发送请求和获取响应的过程中拦截一些操作，并进行一些统一的处理，如添加公共请求头或请求参数等。$httpProvider.interceptors 是 AngularJS 中用来注册 $http 拦截器的方法，可以为 $http 添加一些全局的拦截器。在拦截器中，我们可以使用 request、requestError、response 和 responseError 等方法来对请求或响应进行处理。同时，在拦截器中，如果一个 request 方法返回了一个 promise 对象，则后续的拦截器和请求都会终止，并等待该 promise 对象的决议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3924248841e9894fd9eda