如何在不使用 JSONP_CALLBACK 的情况下在 Angular2 中发出 jsonp 请求

Question

我正在尝试向不属于我的网站发出 JSONP 请求。无论我在 callback= 字段中输入什么，它们的回调名称都不会改变。有没有办法在 Angular2 中设置自定义回调名称？

Answer 1

好吧，因为 Angular 还不支持 JSONP 端点的自定义回调名称（除非我没有做好研究）。

这个技巧从过去的 Vanilla 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 后将其删除，以便您可以根据您的场景进行调整。

如何在不使用 JSONP_CALLBACK 的情况下在 Angular2 中发出 jsonp 请求

How to make jsonp request in Angular2 without using JSONP_CALLBACK

jsonp

angular