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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
AngularJS Module方法详解
Dec 08 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
js实现时间日期校验
May 26 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
微信小程序中使用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 采集心得技巧
2009/05/15 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php curl模拟post请求小实例
2013/11/13 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JsRender实用入门教程
2014/10/31 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
python模糊图片过滤的方法
2018/12/14 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
行政部经理助理岗位职责
2014/06/15 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
学习张林森心得体会
2014/09/10 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
教学反思怎么写
2016/02/24 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技