用angular $httpProvider做路由加载遮罩层

$httpProvider是一个路由拦截器

拦截器允许有一下四个操作:
1、 请求的拦截:request
这个方法的调用在$http请求之前
所以在此之前我们可以修改配置和进行其他操作!
2、 拦截响应:response
当$http服务收到后台给出响应的时候,这个方法被调用。所以我们可以修改请求响应。这个方法接受一个响应对象作为参数。响应对象包含请求配置、标题、状态以及从后台返回的数据。如果返回的是一个无效的对象或者是promise,这个是不会调用的。
3、 拦截请求错误:requestError
4、 拦截响应错误:responseError

-----------------------------------以上解析来源网络-----------------------------------

既然我们知道了$httpProvider有这个功能,那么我们就可以根据这个做遮罩层了。可以做到类似服务端请求进度条的效果。

废话不多说。上图用angular $httpProvider做路由加载遮罩层_第1张图片 现在有一个这样的东西。我点击提交订单。但是当网络慢的时候,点击提交订单,不会立即有反应,然后,我们习惯性的多点几次,但是在程序中,点多少次,数据就请求多少次。这是不合理的,所以我们用$httpProvider做遮罩层。

根据$httpProvider的API(https://docs.angularjs.org/api/ng/service/$http#interceptors),我们知道

$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
  return {
   'request': function(config) {
       // same as above
    },

    'response': function(response) {
       // same as above
    }
  };
});
那么,我们就可以在这里做手脚了。

首先,我们在发生请求的前面做个拦截

加上遮罩层,就是在‘request’加上$("body").append("

这里是个遮罩层
")

然后在请求完成后'response'把这个

这里是个遮罩层
.remove();

完成~

你可能感兴趣的:(用angular $httpProvider做路由加载遮罩层)