Angular服务Request异步请求的实例讲解


Posted in Javascript onAugust 13, 2018

首先这里我简单写个例子来方便您的理解

var request = {
  post: function() {
    var errorCallback = {
      error: function(f) {
        this.fun = f;
      },
      fun: function(data) {}
    };
    successCallback = {
      success: function(f) {
        return this.fun = f, console.log(this.fun), errorCallback;
      },
      fun: function(data) {
        console.log(data)
      }
    };
    returnData = {
      wsscat: "hello"
    };
    //成功
    //var a = successCallback.fun(returnData);
    a = successCallback.fun;
    setTimeout('a(returnData)', 1000)
    return successCallback;
    }
    }
    request.post().success(function(data) {
      console.log("123");
      console.log(data);
    })
    console.log("wscat's test");

这里首先要理解一点很重要的就是异步回调,Javascript的异步回调其实就两个常用方法,

setTimeout定时这类和ajax请求这类

上面代码跟angular的request服务类似,首先是这个request对象,就相当于angular注入request服务之后返回的request对象

这个对象写了一个post方法,而post方法里面这有两个回调对象分别是

errorCallback和successCallback

还有一个模拟ajax请求返回的returnData对象

returnData = {
      wsscat: "hello"
    };

这个在angular里面则是ajax请求服务器返回给你的json对象

我们看看这段代码执行之后会log出什么的信息,如下图

Angular服务Request异步请求的实例讲解

如果熟悉Javascript的话这里不难理解,首先是输出的函数信息是因为success()函数里面的console.log(this.fun)这句

request.post().success()

success()里面首先this.fun = f这句是,把匿名的回调函数赋给successCallback对象里面的fun方法,保存起来让后面setTimeout进行回调

所以我们可以看到首先执行出来的是打印出来的回调函数,然后就是代码最后一句的

console.log("wscat's test");

明白了上述这个流程之后就可以很好的理解angular封装的request服务这一块

只不过angular里面的回调不是setTimeout回调,而是换成了$http回调而已

$http.get(url).success(function(data, status, headers, config) {
//code
})

而$http请求又因为根据返回的成功或者失败把数据

用相应的方法带到我们放到了被匿名回调函数覆盖,对象successCallback的fun里面

而带数据到fun里面就是下面这两句

successCallback.fun(returnData); 
errorCallback.fun(returnData);

后面我再深入说一下

$http.get(url).success(function(data, status, headers, config) {
//code
})

data:这个不用再多叙述了,我们上面做了这么多其实就是想拿服务器返回给我们的data

status:http响应状态码,这个是很基础的东西,但我还是简单说说

200:不用怀疑就是请求成功的意思

304:就是你请求已经被允许的情况下,服务器发现你需要的东西还是跟之前一样没变,则返回给你304

404:请求失败了,请求的资源再服务器没有发现

500:看到5一般就是服务器出错了

常看到的就这几个吧

header:头信息

config:生成原始请求的设置对象,如下图

Angular服务Request异步请求的实例讲解

再往下看,其实post请求和get请求区别是不大的

只是这里get更简单明了,你直接传url过来就行了,相比post请求接口还要带上各种需要请求的参数

但再仔细了解的话,其实post跟get在这里其实都走get请求

Angular服务Request异步请求的实例讲解

Request服务源码

.service('Request', [
  '$http',
  '$cookies',
  '$rootScope',
  '$window',
  '$cookieStore',
  '$location',
  function($http, $cookies, $rootScope, $window, $cookieStore, $location) {
    var request = {
      post: function(api, map, successCallback) {
        $rootScope.dataLoadCount++;
        $rootScope.isLoading = $rootScope.dataLoadCount != 0;
        var url = '../test.php?api=' + encodeURIComponent(api);
        //console.log('[http requestURL]:' + api);
        //~ alert(api);
        var json = '{}';
        if (angular.isDefined(map)) {
          json = angular.toJson(map);
        }

        //console.log('[http requestJson]:' + json);
        url += '&data=' + encodeURIComponent(json);
        var errorCallback = {
          error: function(f) {
            this.fun = f;
          },
          fun: function(data) {}
        };
        var successCallback = {
          success: function(f) {
            return this.fun = f, errorCallback;
          },
          fun: function(data) {}
        };
        $http.get(url).success(function(data, status, headers, config) {
          console.log(config);
          // this callback will be called asynchronously
          // when the response is available
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;

          //console.log('[http success responseData]:' + angular.toJson(data));
          //~ alert('[http success responseData]:'+angular.toJson(data));
          var returnData = {
            code: data.state.code,
            msg: data.state.msg,
            data: data.data
          };
          if (returnData.code == 1) {
            successCallback.fun(returnData);
          } else {
            if (returnData.code == 99) {
              alert(returnData.msg);
              $cookieStore.remove('token');
              $cookieStore.remove('userid');
              delete $cookies.token;
              delete $cookies.userid;
              $rootScope.isLogined = false;
              $rootScope.$broadcast('refreshFooter');
              switch ($rootScope.isWeiXinLogin()) {
                case true:
                  $location.path('login');
                  break;
                case false:
                  $location.path('loginWebapp');
                  break;
              }

              return;
            }
            errorCallback.fun(returnData);
          }
        }).
        error(function(data, status, headers, config) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;

          //console.log('[http error responseData]:' + angular.toJson(data));
          //~ alert('[http error responseData]:status:'+status);
          var returnData = {
            code: 0,
            msg: '网络请求失败',
            data: {}
          };
          errorCallback.fun(returnData);
        });

        return successCallback;
      },
      get: function(url, successCallback) {
        $rootScope.dataLoadCount++;
        $rootScope.isLoading = $rootScope.dataLoadCount != 0;
        var errorCallback = {
          error: function(f) {
            this.fun = f;
          },
          fun: function(data) {}
        };
        var successCallback = {
          success: function(f) {
            return this.fun = f, errorCallback;
          },
          fun: function(data) {}
        };
        $http({
          method: 'GET',
          url: url
        }).success(function(data, status, headers, config) {
          // this callback will be called asynchronously
          // when the response is available
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;

          //console.log('[http success responseData]:' + data);
          var returnData = {
            code: 1,
            msg: '请求成功',
            data: data
          };
          successCallback.fun(data);
        }).
        error(function(data, status, headers, config) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;
          //console.log('[http error responseData]:' + angular.toJson(data));
          var returnData = {
            code: 0,
            msg: '网络请求失败',
            data: ""
          };
          errorCallback.fun(returnData);
        });
        return successCallback;
      }
    }
    return request;
  }
])

以上这篇Angular服务Request异步请求的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 #Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
Angular异步变同步处理方法
Aug 13 #Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 #Javascript
Vue自定义弹窗指令的实现代码
Aug 13 #Javascript
深入Vue-Router路由嵌套理解
Aug 13 #Javascript
AngularJS与后端php的数据交互方法
Aug 13 #Javascript
You might like
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python 反向输出字符串的方法
2018/07/16 Python
详解python中index()、find()方法
2019/08/29 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
主管会计岗位责任制
2014/02/10 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫