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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
JScript实现地址选择功能
Aug 15 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
JavaScript中的"=、==、==="区别讲解
Jan 22 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
微信小程序中使用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中for循环语句的几种变型
2007/03/16 PHP
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
存储过程和函数的区别
2013/05/28 面试题
优秀员工自荐书
2013/12/19 职场文书
房地产开发项目建议书
2014/05/16 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
实习生个人总结范文
2015/02/28 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
python状态机transitions库详解
2021/06/02 Python
基于Python实现流星雨效果的绘制
2022/03/18 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android