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

时间:2017-09-27 18:01:50

标签: angular jsonp

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

1 个答案:

答案 0 :(得分:0)

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

从Vanilla JS的旧日开始就有这个伎俩

您可以在服务或组件中的某个位置创建自定义函数,以手动加载JSONP并提供自定义回调名称。

def update():

    t = main()
    DAU = pd.DataFrame(t['rows'], columns=['Date', 'Vol'])
    DAU['Date'] = pd.to_datetime(DAU['Date'])
    DAU['Vol'] = DAU.Vol.astype(int)

    new = ColumnDataSource(DAU)

source.stream(new)

source = ColumnDataSource({'Date': [], 'Vol': []})

p1 = figure(toolbar_location=None, x_axis_type='datetime')
p1.border_fill_color = 'black'
p1.background_fill_color = 'black'
p1.outline_line_color = None
p1.grid.grid_line_color = None

r1 = p1.line('Date', 'Vol', color="navy", line_width=4, source=source)

curdoc().add_periodic_callback(update, 50)

curdoc().add_root(p1)

并从您的组件或服务中调用它

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);
    })
  }

基本上,这仍然会在头部创建一个脚本标记和回调函数,并在加载JSONP后删除它,以便您可以根据您的场景进行调整。