zoukankan      html  css  js  c++  java
  • AngularJS转换请求内容

    在"AngularJS中转换响应内容"中,体验了如何转换响应内容。本篇来体验如何转换请求内容。

    主页面通过onSend方法把request对象转递出去。
     

    <form name="form">
        <textarea ng-model="request.message" required></textarea>
        <input ng-model="request.tags">
    </form>
    <button ng-click="onSend($event, form.$valid)">发送</button>

    request对象和onSend方法被定义在了controller中。

    angular.module('api.controllers')
        .controller('controllers.View',['$scope', 'services.Api', function($scope, api){
            $scope.request = {
                message: "",
                tags:""
            };
            
            $scope.onSend = function(event, valid){
                event.preventDefault();
                if(valid){
                    api.send($scope.request).then(function(result){
                        $scope.request.message = "";
                        $scope.request.tags = "";
                    })
                }
            }
        }]);

    以上,控制器依赖了services.Api这个服务,该服务封装了post请求。

    angular.module('api.services').factory('services.Api',['$q', '$http', 'services.transformer.ApiRequest', function($q, $http, apiRequestTransformer){
        return {
            send: function(message){
                var deferred = $q.defer();
                $http({
                    method: "POST",
                    url: "",
                    data: message,
                    transformRequest: apiRequestTransformer
                }).success(function(data){
                    deferred.resolve(data);
                });
                
                return deferred.promise;
            }
        }
    }]);

    $http服务中的transformRequest字段就是用来转换请求的。services.transformer.ApiRequest服务用来实施具体的转换。

    angular.module('api.transformers').factory('services.transformer.ApiRequest', function(){
        return function(data){
            return JSON.stringify(data);
        }
    })
  • 相关阅读:
    macOS npm install -g npm失败提示无权限
    js中的展开运算符
    vite启动项目
    export与export default区别
    vue3新特性拾遗
    isRef, isReactive 与 isReadonly的原理
    shallowReactive与reactive的原理浅析
    shallowReadonly 与 readonly原理浅析
    shallowRef与ref的原理浅析
    设计模式-资料相关
  • 原文地址:https://www.cnblogs.com/darrenji/p/5162667.html
Copyright © 2011-2022 走看看