angular学习笔记(二十五)-$http(3)-转换请求和响应格式
生活随笔
收集整理的這篇文章主要介紹了
angular学习笔记(二十五)-$http(3)-转换请求和响应格式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本篇主要講解$http(config)的config中的tranformRequest項和transformResponse項
1. transformRequest:
$http({transformRequest: function(data){//對前臺發送的data進行處理 return data}})這個在測試的時候遇到了很大的問題.只要經過transformRequest函數處理,哪怕是不做任何處理,node后臺都會報錯,php后臺也報同樣的錯,so,angular的這部分是有bug的.
?
?
2. transformResponse:
$http({transformResponse: function(data){//對后臺返回的data進行處理 return data}})?
?
demo:
html:
<!DOCTYPE html> <html ng-app = 'HttpGet'> <head><title>18.4 $http(2)</title><meta charset="utf-8"><script src="angular.js"></script><script src="script.js"></script> </head> <body> <div ng-controller = "dataController"><span>{{data}}</span> </div> <script>//自己寫了一個把字符串轉換成json格式對象的方法
var $ = {};$.serialize = function(data){var arr1 = data.split('&');var jsonObj = {};for(var i=0; i<arr1.length; i++) {var arr2 = arr1[i].split('=');jsonObj[arr2[0]] = arr2[1];}return jsonObj;}; </script> </body> </html>
js:
var jsonData = {name:"code_bunny"};var httpGet = angular.module('HttpGet',[]); httpGet.factory('getData',function($http,$q){return function(){var defer = $q.defer();$http({method:'post',url:'/api/user',data: jsonData,headers: {'Authorization':'code_bunny'},// transformRequest:function(data){// console.log(data === jsonData);// return data// },//得到的數據其實是'name=code_bunny&age=3'transformResponse:function(data){
//通過$.serialize方法轉換后,得到json格式的對象,然后獲取name屬性的值return $.serialize(data)['name']}}).success(function(data,status,headers,config){defer.resolve(data);}).error(function(data,status,headers,config){defer.reject(data)});return defer.promise} }); httpGet.controller('dataController',function($scope,getData){$scope.data = getData() });
除了在$http(config)里配置,還可以通過$httpProvider里進行全局配置:
httpGet.config(function($httpProvider){$httpProvider.defaults.transformResponse=function(data){return $.serialize(data)['name']} });?
nodejs: (這里用的是最新版的express,需要另外安裝加載body-parser模塊,具體使用參考:https://github.com/expressjs/body-parser)
var express = require('express'); var bodyParser = require('body-parser'); var app = express();// parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false }));// parse application/json app.use(bodyParser.json());app.use(express.static(__dirname+''));var data = "name=code_bunny&age=3";app.post('/api/user',function(req,res){console.log(req.body);res.send(data) }); app.listen(3000);
完整代碼路徑:?https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY/18.4%20%24http(2)
總結
以上是生活随笔為你收集整理的angular学习笔记(二十五)-$http(3)-转换请求和响应格式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： httpClient post方法 解析
- 下一篇： CAS增加免登陆（Remember Me