AngularJs $http 请求服务

$http

$http是Angular的一个核心服务,它有利于浏览器通过XMLHttpRequest 对象或者 JSONP和远程HTTP服务器交互。

$HTTP API 是基于 $q服务暴露的deferred/promise APIs。

快捷使用方式:

$http.get

$http.head

$http.post

$http.put

$http.delete

$http.jsonp

$http.patch

设置HTTP请求头:

$HTTP服务将会给所有请求自动创建HTTP头。这个默认设置能完全的通过访问$httpProvider.defaults.headers配置对象配置。目前包含默认配置:

$httpProvider.defaults.headers.common
        //-- Accept:application/json,text/plain
  $httpProvider.defaults.headers.post
        //-- Content-Type:application/json
  $httpProvider.defaults.headers.put
        //-- Content-Type:application/json

添加或覆盖这些默认值

添加或删除这些配置对象的属性。

全局配置

 $httpProvider.defaults.headers.post = {“my-header”:”value”}

单请求配置

$http({
    method:”POST”,
    url:”url”,
    headers:{
    “Content-Type”:” // your config”
    },
    data:{ data: ” // your data” }
  })

重写每个请求的默认转换。

下面的代码演示添加一个新的响应转换,在运行后的默认响应转换。

Function appendTransform(defaults,transform){
    defaults:angular.isArray(defaults)?defaults:[defaults];
    return defaults.concat(transform);
  }
  $http({
    url:”url”,
    method:”GET”,
    transformResponse:appendTransform($http.defaults.transformResponse,function(){
    return doTransform(value);
    })
  })

设置http请求缓存。

  $http.defaults.cache = true/false;

请求拦截

 angular.module(“xxx”,[])
  .config([“$httpProvider”,function($httpProvider){
    $httpProvider.interceptors.push(“yourInterceptors”);
  }])
  .factory(“yourInterceptors”,[“$q”,”dependency”, function($q,dependency){
    return {
      “request”:function(config){
        // do something on success
        return config;
      },
    “requestError”:function(rejection){
       // do something on error
       If(canRecover(rejection)){
        return responseOrNewPromise
       }
       return $q.reject(rejection);
      },
    “response”:function(response){
       // do something on success
       return response;
      },
    “responseError”:function(rejection){
       // do something on error
       If(canRecover(rejection)){
         return responseOrNewPromise
       }
      return $q.reject(rejection);
      }
   };
  }]);

依赖:$httpBackend $cacheFactory $rootScope $q $injector

使用:$http(config);

参数

method:字符串,请求方法。

url:字符串,请求地址。

params:字符串或者对象,将使用paramserializer序列化并且作为GET请求的参数。

data:字符串或者对象,作为请求信息数据的数据。

headers:对象,字符串或者函数返回表示发送到服务器的HTTP请求头。如果函数的返回值为空,则headers则不发送。函数接受一个配置对象作为参数。

xsrfHeaderName:字符串,填充XSRF令牌的HTTP请求头名称。

xsrfCookieName:字符串,含有XSRF令牌cookie的名字。

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

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

paramSerializer:字符串或者返回字符串的函数。用于编写请求参数(指定为对象)的字符串表示形式的函数。如果指令是字符串,那么将被解释为通过$injector注册的函数,这意味着你能通过注册服务方式创建你自己的序列化程序。默认的序列化是$httpParamSerializer;或者你可以使用$httpParamSerializerJQLike。

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

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

withCredentials:boolean,是否设置withcredentials flag的XHR对象。查看更多信息的凭据。

responseType:字符串,响应头类型。

返回

data:字符串或对象。变换函数变换后的响应体。

status:数值,响应的http状态码。

headers:函数,响应头的getter函数。

config:对象,用于生成请求的配置对象。

statusText:字符串,响应的HTTP状态文本。

方法

get(url,[config]);

url:请求地址。

config:请求配置对象。

delete(url,[donfig]);

url:请求地址。

config:请求配置对象。

head(url,[config]);

url:请求地址。

config:请求配置对象。

jsonp(url,[config]);

url:请求地址。

config:请求配置对象。

post(url,data,[config]);

url:请求地址。

data:请求内容。

config:请求配置对象。

put(url,data,[config]);

url:请求地址。

data:请求内容。

config:请求配置对象。

patch(url,data,[config]);

url:请求地址。

data:请求内容。

config:请求配置对象。

属性

pendingRequests

当前正在等待的请求的配置对象数组。主要是为了用于调试目的。

defaults  

请求头配置默认属性。

$httpParamSerializerJQLike

Http参数序列化程序。序列化程序也将按字母顺序排序的参数。

使用代码:

(function () {
    angular.module("Demo", [])
    .controller("testCtrl",["$http", "$httpParamSerializerJQLike",testCtrl]);
    function testCtrl($http, $httpParamSerializerJQLike){
      var data = { id: 1, value: "hello" };//
      $http({
          method: "post",
          data: data,//Form Data = {"id":1,"value":"hello"}
          url: "/url",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          success: function (d) { console.log(d); }
      });
      $http({
          method: "post",
          data: $httpParamSerializerJQLike(data),//Form Data 变成 id:1  value:hello
          url: "/url",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          success: function (d) { console.log(d); }
      });
    };
  }());

请求除了$http,还有$resource,关于后者,后面再提,先说明下$http,在最后例子的2个$http请求的时候,还加了headers设置"Content-Type": "application/x-www-form-urlencoded",这是因为有些小伙伴提出请求没有Form Data,只有 Request Payload,那么当我们设置请求头的Content-Type值为application/x-www-form-urlencoded时,就能看见Form Data了。实测可行...

时间: 2024-10-17 17:57:39

AngularJs $http 请求服务的相关文章

ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法

今天用PL/SQL连接虚拟机中的Oracle数据库,发现报了“ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务”错误,也许你也遇到过,原因如下: oracle安装成功后,一直未停止数据库(即数据库是启动的),客户端配置成功后,应该一直不会有什么问题. 有时把Oracle安装在虚拟机中,而且Oracle安装完毕后,没在进行任何监听的配置,则虚拟机再启动,则就会出现ORA-12514的问题. 如下是解决思路: 根据出错信息判断出客户端未监听到实例服务名 1.通过重启服务的方式启动

Angularjs总结(七) 路由及请求服务等

1 define(['angular'], function (ng) { 2 'use strict'; 3 4 var app = ng.module('index-module', ['ngCookies', 'ngRoute', 'ui.bootstrap']); 5 6 app.config(['$routeProvider', function ($routeProvider) { 7 $routeProvider 8 .when("/", { controller: 'i

android菜鸟学习笔记24----与服务器端交互(一)使用HttpURLConnection和HttpClient请求服务端数据

主要是基于HTTP协议与服务端进行交互. 涉及到的类和接口有:URL.HttpURLConnection.HttpClient等 URL: 使用一个String类型的url构造一个URL对象,如: URL url = new URL(http://10.0.2.2/index.php); openConnection()方法返回一个对指定url的资源的连接.返回类型是URLConnection,但是,由于这里我们一般用的是http协议,所以返回的实际是HttpURLConnection对象,故一

防止tab页反复的去请求服务端

直接看图吧. 左边是企业树,右边是根据企业变化的一个tab页 实现功能:1.我们希望如果选中的企业不变,我们在切换旁边五个tab页的时候,只是第一次进去的时候请求服务器端.下面来回切换tab页都不请求服务器端(前提企业树不切换). 2. 如果选中的企业变化,相应的 右边的表结构也要跟着相应的变化. 思路.1.企业树不切换的时候,每点击一次tab 页我们给他一个标识,该标识,去判断如果企业树不变来回切换我们不请求服务端.如下 $("#tab-director").click(functi

***PHP请求服务curl以及json的解析

对于thinkphp框架,相信每一个php开发者都会有了解或者熟悉吧!前端很多都用的ajax的结合,前几天遇到了一个问题,就是请求另一个服务,也就是请求一个接口,然后对方返回一个json串,一开始对curl不熟悉,导致自己的程序不能很顺利的去处理请求服务后的json串!今天对curl又看了一下,问题解决了,现在就请求的的代码做如下显示:$new_url="www.xxx.com";$requesturl="http://192.168.1.100:1234/test/test

[Python]webservice学习(2) --自己写soap消息请求服务

上文中webservice学习(1) ,使用soaplib建立了一个超简单的webservice服务,也是用suds调用成功了,那如果想使用http包自己组成一个soap消息来调用接口怎么办呢? 这个时候我们就想到使用wsdl这个文件了,我看了些wsdl的文档,也参照这其他人使用java,php等语言实现的soap消息调用的格式来写,但是怎么调试都没成功.. 就是说他总是会返回500或者是405各种错误,就是下面代码中的old_soap_body 变量中的消息格式. #coding: utf-8

关于Oracle报“ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务”错误

关于Oracle报“ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务”错误原因:listener.ora中没有指定监听服务器名. 如下是解决思路: 尝试1.通过重启服务的方式启动数据库,再次连接仍无法连接服务器. 尝试2.既然第一种方法不能解决问题,那就第二种方法.考虑监听listener.ora 步骤如下: 在oracle服务器Oracle安装目录(我的在C:\oracle\product\10.2.0\db_1\NETWORK\ADMIN下,每个人的不一样,根据自己的情况

【教程】【FLEX】#002 请求服务端数据(UrlLoader)

为什么Flex需要请求服务端读取数据,而不是自己读取? Flex 是一门界面语言,主要是做界面展示的,它能实现很多绚丽的效果,这个是传统Web项目部能比的. 但是它对数据库和文件的读写 没有良好的支持. 既然Flex没有对数据库和读写文件有良好的支持,那么读数据数据,和读写文件,可以用C#或者Java来编写,然后Flex请求 用C#或者Java写好的接口. Flex请求服务端接口的方法有很多种,这边我就讲解如何使用UrlLoader来请求接口. 请求服务端接口的步骤: 1.创建UrlReques

防止tab页重复的去请求服务端

直接看图吧. 左边是企业树,右边是依据企业变化的一个tab页 实现功能:1.我们希望假设选中的企业不变,我们在切换旁边五个tab页的时候,仅仅是第一次进去的时候请求server端.以下来回切换tab页都不请求server端(前提企业树不切换). 2. 假设选中的企业变化,对应的 右边的表结构也要跟着对应的变化. 思路.1.企业树不切换的时候,每点击一次tab 页我们给他一个标识,该标识,去推断假设企业树不变来回切换我们不请求服务端.例如以下 $("#tab-director").cli

android菜鸟学习笔记25----与服务器端交互(二)解析服务端返回的json数据及使用一个开源组件请求服务端数据

补充:关于PHP服务端可能出现的问题: 如果你刚好也像我一样,用php实现的服务端程序,采用的是apache服务器,那么虚拟主机的配置可能会影响到android应用的调试!! 在android应用中访问的IP都是10.0.2.2,如果在apache虚拟主机配置文件中配置了多个虚拟主机,那么将默认解析为对第一个虚拟主机的请求,所以,在调试android应用时,应该将对应的服务端所配置的那个虚拟主机放在配置文件中的第一个虚拟主机的位置.否则就会出现请求的文件不存在等的错误. 服务端返回JSON数据及