AngularJS中$http服务常用的应用及参数

网络编程 2024/5/19 佚名

3 2 1

前言

$http 服务：只是简单封装了浏览器原生的XMLHttpRequest对象，接收一个参数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容，这个函数返回一个promise对象，具有success和error方法。

$http服务的使用场景：

var promise = $http({
method:"post",    　　// 可以是get,post,put, delete,head,jsonp;常使用的是get,post
url:"./data.json", 　　  //请求路径
params:{'name':'lisa'}, //传递参数，字符串map或对象，转化成？name=lisa形式跟在请求路径后面
data:blob, 　　　　　　　　//通常在发送post请求时使用，发送二进制数据，用blob对象。
}).success(function(data){
//响应成功操作
}).error(function(data){
//响应失败（响应以错误状态返回）操作
})

then()函数：可以使用then()函数来处理$http服务的回调，then()函数接受两个可选的函数作为参数，表示success或error状态时的处理，也可以使用success和error回调代替：　

then(successFn, errFn, notifyFn) ,无论promise成功还是失败了，当结果可用之后， then都会立刻异步调用successFn或者errFn。这个方法始终用一个参数来调用回调函数：结果，或者是拒绝的理由。

在promise被执行或者拒绝之前， notifyFn回调可能会被调用0到多次，以提供过程状态的提示

promise.then(function(resp){
//响应成功时调用，resp是一个响应对象
}, function(resp) {
// 响应失败时调用，resp带有错误信息
});

then()函数接收的resp（响应对象）包含5个属性：　

1. data（字符串或对象）：响应体

2. status:相应http的状态码,如200

3. headers(函数)：头信息的getter函数，可以接受一个参数，用来获取对应名字的值

4. config(对象)：生成原始请求的完整设置对象

5. statusText:相应的http状态文本，如"ok"

或者使用success/error方法，使用

//成功处理
promise.success(function(data, status, headers, config){
// 处理成功的响应
});
// 错误处理
promise.error(function(data, status, headers, config){
// 处理非成功的响应
});

　　使用实例：

index.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>$http request test </title>
 <script src="/UploadFiles/2021-04-02/angular.js">
　
app.js




var myHttpApp = angular.module("myApp",[]);
myHttpApp.controller("myAppController",function($q,$http,$scope){
  var deffer = $q.defer();
  var data = new Blob([{
    "name":"zhangsan"
  }])
  $scope.loadData = function(){
    var promise = $http({
      method:"post",
      url:"./data.json",
      cache: true
    }).success(function(data){
      deffer.resolve(data);
    }).error(function(data){
      deffer.reject(data);
    })

    promise.then(function(data){
      $scope.myData = data.data;
    })
    /*promise.success(function(data){
      $scope.myData = data;
    })*/
  }
})


　　data.json


[
 {"name":"zhangsan","attr":"China"},
 {"name":"lisa","attr":"USA"},
 {"name":"Bob","attr":"UK"},
 {"name":"Jecy","attr":"Jepan"}
]


　　结果：

调用then()函数时返回的resp对象：

总结
AngularJS中$http服务常用的应用及参数到这就基本结束了，希望本文的内容能对大家学习使用AngularJS有所帮助。如果有疑问可以留言交流。

angularjs,http,angularjs,服务,angularjs,http,参数

标签：

angularjs,http,angularjs,服务,angularjs,http,参数

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“AngularJS中$http服务常用的应用及参数”

AngularJS中$http服务常用的应用及参数

暂无“AngularJS中$http服务常用的应用及参数”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240519

AngularJS中$http服务常用的应用及参数

angularjs,http,angularjs,服务,angularjs,http,参数

JS对HTML表格进行增删改操作

详解AngularJS如何实现跨域请求

评论“AngularJS中$http服务常用的应用及参数”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接