• AngularJs 与服务器通信 $http, $q, $resource


    $http服务是AngularJS系统自带的,可以用来进行网络通信、获取远程服务器的数据。要记住的是,$http是对浏览器XMLHttpRequest的封装,也就是说,它其实是Ajax。

    $http(options).success(successFn).error(errorFn)

    • options:包括url、method(get或post)
    • successFn:成功的回调
    • errorFn:失败的回调

    $http(options)返回的是一个被封装的promise对象,promise.then(function(data){},function(err){})


    q服务。q服务是在AngularJS中用来创建promise对象的,但它首先创建一个defered对象:
    var defered = $q.defer();

    defered对象有3个方法resolve, reject, notify

    userService.getRandomUser = function () {

      var defered = $q.defer();

       $http.get(url)

       .success(function (data) { defered.resolve(data.results[0]); })

       .error(function (err) { defered.reject(err); });

      return defered.promise; // 把defered对象中的promise对象返回出来

    };

    angular-resource.js中的ngResource模块中提供了一个provider $resource。

    $resource服务是一个创建资源对象的工厂,用来创建同服务端交互的对象,因此我们并不是直接使用$resource服务本身同服务器通信,而是通过其创建的对象来和服务端通信。 $resource(url, [paramDefaults], [actions], options)

    url: 一个参数化的url模板,带有前缀参数(如:/api/users/:userId)

    paramDefaults: url参数的默认值,参数对象中的每一个键值对都是先绑定到一个url模板,任何多余的密钥都被附加到url query的?后。/path/:verb +{verb:’greet’,salutation:’hello’}  =>  /path/greet?salutation=hello。如果参数的任何一个值是函数,它将作为每一次请求获取的参数值而被执行。

    actions: 用户对于resource行为的默认设置进行扩展的自定义配置的散列,该配置将会以$http.config的格式创建。

    action: 字符串,action的名称,这个名称将成为resource对象方法的名称。

    method: 字符串,http方法(不区分大小写,如GET,POST,PUT,DELETE,MOVE等)

    params: 对象,行为预先设定的参数,

    url: 字符串,资源地址

    isArray: boolean, 如果为true,那么这个行为返回的对象是一个数组。

    transformRequest: 函数/函数的数组。转换函数获取http请求体和请求头,并且返回他们的转换版(通常是序列化)

    transformResponse: 函数/函数的数组。转换函数获取http响应体和响应头,并且返回他们的转换办(通常是序列化)

    cache: boolean, 如果为true, 一个默认的$http缓存将被作为请求的缓存,否则如果存在一个用$cacheFactory创建的缓存实例将用于缓存。

    timeout:数值,毫秒,超时则让请求中止

    responseType: 字符串,响应头类型,用来设置XMLHttpRequestResponseType属性

    interceptor: 对象,拦截对象有两个可选方法-response和responseError。

    options: 扩展$resourceProvider行为的自定义设置,唯一支持的选项是stripTrailingSlashes, boolean类型,如果为真,url尾部的斜杠会被移除(默认为true)。

    var User = $resource('/api/users/:userId', {userId: '@id'});

    $resource服务提供的默认actions有5个:

    actions: {
            'get': {method: 'GET'},
            'save': {method: 'POST'},
            'query': {method: 'GET', isArray: true},
            'remove': {method: 'DELETE'},
            'delete': {method: 'DELETE'}
          }

    User对象包含两个get方法,三个非get类型方法:

    User.get({id: '123'}, successFn, errorFun);   // 请求地址/api/users/123

    User.query(params, successFun, errorFun);    // 请求多条数据

    User.save(params, payload, successFun, errorFun);  // params用于填充url变量, payload是请求体

    User.delete(params, payload, successFun, errorFun);   // delete请求

    User.remove(params, payload, successFun, errorFun);   //delete请求, 移除多条数据

    除了这5种默认actions,我们还可以自定义扩展action,

    $resource( url, {}, {

        sendEmail: {

             method: 'POST',

             url: '',

             params:  {},

            isArray: boolean,

            transformRequest: 函数或函数数组,  // function(data) {return angular.toJson(data); }    把对象转换成json字符串

            transformResponse: 函数或函数数组,   // function(data) {return angular.formJson(data);}   把json字符串解析为一个对象

           interceptor: {

        response: function(d){}

        responseError: function(d){}

      }

        }

    })

  • 相关阅读:
    亲历dataguard的一些经验问答题
    [转]ORA-38500: USING CURRENT LOGFILE option not available without stand
    修改npm全局安装模式的路径
    Vue 环境搭建
    Linux下查看系统版本号信息的方法
    每天一个Linux命令(12):su命令
    Ubuntu 首次给root用户设置密码
    适用于Linux的windows子系统
    IDEA的terminal设置成Linux的终端一样
    Windows模拟linux终端工具Cmder+Gow
  • 原文地址:https://www.cnblogs.com/xuepei/p/9036642.html
Copyright © 2020-2023  润新知