JSONP_CALLBACK을 사용하지 않고 Angular2로 jsonp 요청을하는 방법

Question

내가 소유하지 않은 웹 사이트에 JSONP 요청을 보내려고합니다. 콜백 이름은 콜백 필드에 무엇을 넣든지 관계없이 변경되지 않습니다. Angular2에서 사용자 정의 콜백 이름을 설정할 수있는 방법이 있습니까?

Answer 1

음, Angular는 아직 JSONP 엔드 포인트에 대한 사용자 정의 콜백 이름을 지원하지 않기 때문에 (내 연구를 잘하지 않은 한).

다시 옛 날부터이 트릭이있다 바닐라 JS는

당신은 수동으로 JSONP를로드하고 사용자 정의 콜백 이름을 제공하기 위해 어딘가에 서비스 또는 구성 요소에서 사용자 정의 함수를 만들 수 있습니다.

getJSONP(uri, callbackName) { 
    return new Promise(function(resolve, reject) { 

     let id = '_' + Math.round(10000 * Math.random()); 

     window[callbackName] = (data) => { 
      delete window[callbackName]; 
      let ele = document.getElementById(id); 
      ele.parentNode.removeChild(ele); 
      resolve(data); 
     } 

     let src = uri + '&callback=' + callbackName; 

     let script = document.createElement('script'); 
     script.src = src; 
     script.id = id; 
     script.addEventListener('error', reject); 
     document.getElementsByTagName('head')[0].appendChild(script); 
    }) 
    } 

및 구성 요소 또는 서비스에서 호출

this.getJSONP(JSONPUri, 'myCustomCallbackName').then((data) => { 
    console.log(data); 
}) 

기본적으로이 아직도 머리에 스크립트 태그와 콜백 함수를 작성하고 당신이 그것을 적용 할 수 있도록 JSONP를로드 할 때 삭제됩니다 당신의 시나리오.