Angular의 $ http 서비스에서 매개 변수 순서를 지정할 수 있습니까?

Question

내 Angular 앱에는 서버에서 데이터를 검색하기 위해 $http을 사용하는 서비스가 있습니다. 서버 끝점은 HMAC 인증을 사용하며 쿼리 문자열 매개 변수가 URL의 특정 순서로 있어야합니다.

Angular sorts the $http parameters when it builds the URL이므로 맞춤 매개 변수 순서를 지정할 수없는 것처럼 보입니다.

다음은 예입니다 :

this.apiCall = function() { 
    return $http({ 
     method: 'GET', 
     url: 'http://example.com/url/v1/endpoint', 
     params: { 
      'c': 'cdata', 
      'a': 'adata', 
      'b': 'bdata' 
     } 
    }); 
}; 

http://example.com/url/v1/endpoint?a=adata&b=bdata&c=cdata로 URL을 구축 할 예정 각도

,하지만 지정된대로 http://example.com/url/v1/endpoint?c=cdata&a=adata&b=bdata가 PARAMS의 순서를 유지해야합니다.

URL 문자열에 대한 매개 변수를 수동으로 지정할 수 있다는 것을 알고 있지만 매우 친숙하지 않으며 $http 인터셉터에서 쉽게 관리 할 수 ​​없습니다.

ECMAScript에서 객체 정렬이 지정되지 않았으므로 Angular가 매개 변수를 정렬하여 브라우저 구현간에 일관된 동작을 유지하도록 아마 정렬합니다.

관계없이, 매개 변수를 지정된대로 보존하는 URL을 작성하기 위해 매개 변수를 정렬하는 기본 각도 동작을 해결하는 방법을 아는 사람이 있습니까?

Answer 1

모듈의 설정에서

: 다음과

$httpProvider.interceptors.push(function() { 
    return { 
     request: function (config) { 
      if (!config.paramOrder) { 
       return config; 
      } 

      // avoid leaking config modifications 
      config = angular.copy(config, {}); 

      var orderedParams = []; 
      config.paramOrder.forEach(function (key) { 
       if (config.params.hasOwnProperty(key)) { 
        orderedParams.push(encodeURIComponent(key) + '=' + encodeURIComponent(config.params[key])); 
        // leave only the unordered params in the `params` config 
        delete config.params[key]; 
       } 
      }); 

      config.url += (config.url.indexOf('?') === -1) ? '?' : '&'; 
      config.url += orderedParams.join('&'); 

      return config; 
     }, 
    }; 
}); 

호출 :

$http({ 
    method: 'GET', 
    url: 'http://example.com/url/v1/endpoint', 
    params: { 
     a: 'aValue', 
     b: 'bValue', 
     c: 'cValue' 
    }, 
    paramOrder: ['c', 'a'] 
}); 

c으로 시작하는 쿼리 문자열을 얻고 그 다음에 a이옵니다. paramOrder에 언급되지 않은 매개 변수는 정렬 된 매개 변수 다음에 추가됩니다 (알파벳 순서).

Answer 2

나는 "지정된대로"매개 변수 순서를 유지하기위한 초보적인 인터셉터를 만들었습니다. 이 인터셉터는 keepParamsOrder 구성 변수가 $http 호출에서 설정되면 실행됩니다.

$httpProvider.interceptors.push(function() { 
    return { 
     'request': function(config) { 
      if (!config.keepParamsOrder || !config.params) { 
       return config; 
      } 

      var queryStrings = []; 
      for (var key in config.params) { 
       if (config.params.hasOwnProperty(key)) { 
        queryStrings.push(key + '=' + config.params[key]); 
       } 
      } 

      // Reset the params to be empty 
      config.params = {}; 

      config.url += (config.url.indexOf('?') === -1) ? '?' : '&'; 
      config.url += queryStrings.join('&'); 

      return config; 
     }, 
    }; 
}); 

이 서비스 콜 설정에서 실행하도록 알려주기 : : 나는 일을 유선형 보장 더 무언가를 창조하는 솔루션에 개선

this.apiCall = function() { 
    return $http({ 
     method: 'GET', 
     url: 'http://example.com/url/v1/endpoint', 
     params: { 
      'c': 'cdata', 
      'a': 'adata', 
      'b': 'bdata' 
     }, 
     keepParamsOrder: true 
    }); 
};