Angular中$http介绍

在angular.js 1.6版本之后，删除了.success和.error方法，而使用.then。

此处基于Angular1的最后版本。

$http配置选项

$http(config).then()，根据官方文档，常用的有以下配置选项：

• method → http请求的方法，如get/post。
• url → 类型为string/trustedObject，如果是跨域url，需要使用$sce.trustAsResourceUrl(url)。
• params → 类型为Object，angular会自动将其序列化作为Get请求的参数。
• data → 类型为string/Object，会作为请求体数据被post发送。
• headers → 类型为Object，可以设置请求头相关参数。
• transformRequest → 类型为函数，function(data,headerGetter)，用来将请求体和请求头进行转换包装并发送。
• responseType → 指定响应消息的解析类型。

目前我用到的也就上面这些，如果有更多的需求请查阅官方文档。

简写请求方式

Get

$http.get(url,[config]).then(function(res){}, function(err){});

如：

$http.get('/getData', {params:{a: 12, b:5},responseType: 'json' //可以自动解析传输过来的字符串为对象、数字等
}).then(function(res){}, function(err){});

Post

$http.post(url, data, [config]).then(function(res){}, function(err){});

Jsonp

jsonp请求，有跨域url 的安全限制，详情及解决请看官方文档。

一个借助jsonp接口数据模拟百度搜索框的例子：

angular.module('baidu',[]).controller('search',function($scope,$http,$sce){$scope.keyword = '';$scope.arr = [];$scope.$watch('keyword',function(){   $http.jsonp($sce.trustAsResourceUrl('http://suggestion.baidu.com/su'),{params:{wd:$scope.keyword},jsonpCallbackParam:'cb'}).then(function(json){console.log(json);$scope.arr = json.data.s;},function(err){console.log('失败'+err);});});
});

Angular文件上传

使用FormData异步提交

常用的表单提交编码方式有两种：multipart/form-data 和 application/x-www-form-urlencoded，如果是html页面中的form表单上传，可以使用enctype来指定编码方式，不指定时默认是后者。

文件上传必须使用multipart/form-data编码方式的表单post提交，而如果需要异步上传文件，则要使用FormData对象，如下：

$http({method: 'POST',url: '/myapp/api',headers: {'Content-Type': undefined //这里很重要，需要取消post默认的Content-Type，否则后台接收不到！},//angular提供的配置选项。在这里将data数据转换、包装成FormData格式transformRequest: function(data) {var formData = new FormData();formData.append('id', data.id);formData.append('type', data.type);return formData;},//也可以在外面创建FormData对象，直接给data指定为该对象data: {id: $scope.userId,type: $scope.infoType}
}).then((res)=>{}, (err)=>{});

angular-file-upload上传文件

这个插件在比较大的项目中用起来会很方便，比如文件树中文件的上传。

当把angularFileUploader作为依赖注入后，可以创建FileUploader对象：

$scope.material = {};var materialUploader = $scope.material.uploader = new FileUploader({url: fileManageService.uploadFile(), //需要上传到的url地址formData: [{}],autoUpload: true,removeAfterUpload: true,withCredentials: true,});// CALLBACKSmaterialUploader.onAfterAddingFile = function (fileItem) {$scope.material.isUploaded = true;};materialUploader.onSuccessItem = function (fileItem, response, status, headers) {// 把结果追加到材料列表if (response && response.data) {$scope.material.children.push(response.data[0]);$scope.material.totalItems = $scope.material.children.length;} else {// $dialog.alert({//   'msg': '上传材料出错',//   'title': '出错了'// });}};materialUploader.onErrorItem = function (fileItem, response, status, headers) {//提示错误// console.info('onErrorItem', fileItem, response, status, headers);};materialUploader.onCompleteAll = function () {//完成，做后续操作$scope.material.isUploaded = false;// init();};

同时需要给html页面中的文件input标签添加属性：

file-select="" uploader="material.uploader" type="file" >

详请请看官方文档。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！