AngularJS：http服务

Posted 2020-09-07

本文也同步发表在我的公众号“我的天空”

 

 

 http服务

 

之前我们的示例都是在本地获取模拟数据，在实际应用中，所有的项目都将不可避免的从后台获取数据，我们都是通过Ajax来实现与服务器的通信。在AngularJS中，我们使用http服务来实现与后台的数据交互，http服务的使用请看以下代码：

 

    var app=angular.module("myApp",[]);
    app.controller("person",function($scope,$http){
        $http.get(‘http://test.php‘)
       .success(function(data){
           //加载成功后的处理，data为返回的数据
       }).error(function(data){
           //加载失败后的处理，data为返回的数据
       })
     });

 

在以上代码中，我们在控制器代码中添加了$http模块，这样便可以使用http服务了，我们采取get的方式访问了一个url，随后在success（）与error函数中分别针对加载成功或失败做相应的处理。测试http服务时请注意，所请求的url必须是在web服务上的，而不能在本地测试。如果要向后台传递参数，则应该添加params参数，如下：

 

$http.get(‘http://test.php‘,{params:{id:‘5‘,name:‘张三‘}
    }) .success(function(data){
           ......
    }).error(function(data){
           ......
     })

 

在以上代码中，我们添加了两个传递到后台的参数，分别是id和name，其值分别是“5”与“张三”。

 

如果要使用POST方式与后台通信，则应使用$http.post()方法，要注意的是params参数应该放在第三个参数位置，如下：

 

$http.post(‘http://test.php‘,‘‘,{params:{id:‘5‘,name:‘张三‘}})

通常，我们会给请求传递一个配置对象，以便灵活的对请求进行配置，其调用形式如下：$http(config)，config为一个对象，可对其设置请求方式（get/post）、请求的url、传递参数、超时时间等。如以上的示例可写成如下代码：

 

$http({
    method:‘post‘,
    url:‘http://test.php‘,
    params:{id:5,name:‘张三‘}
   }).success(function(data){
        ......
   }).error(function(data){
       ......
  })

 

对于config的更多配置参数，可以查阅AngularJS相关文档。