如何在requireJS中加载JSONP?

Posted

技术标签:

【中文标题】如何在requireJS中加载JSONP?【英文标题】:How to load JSONP inside requireJS? 【发布时间】:2013-07-16 03:08:38 【问题描述】:

我正在尝试在 requireJS 中加载 JSONP 文件。 docs 说它应该像这样工作:

require(["http://example.com/api/data.json?callback=define"],
    function (data) 
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    
);

我的 config.json 看起来像这样(没有换行符):

config(
    "default_language":"de-DE",
    "language_current":"de-DE",
    "language_selector":"translate",
    "language_set":"false"
);

所以我的 require 调用应该是:

require(["http://example.com/api/config.json?config=define"],
    function (data) 
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    
);

但这样做只会返回config (the callback function!) is undefined。我已经坐了一段时间了......并使用asyncplugin让它像这样工作,但是这种语法不起作用,因为我在定义上下文之外声明了一个函数。

var config = function(data) 
    var settings = ;

  // create application settings
  settings.language_default = data.default_language || "en-EN";
  settings.language_current = data.language_current || priv.settings.language_default;
  settings.language_selector = data.selector || "translate";
  settings.language_set = data.language_set || false;

  console.log(settings);
  // return response object
  return settings;
;

define([
    'async!http://example.com/api/config.json!config'
  ],
  config
);

这似乎行得通,因为现在我专门将回调函数命名为config

我想一切都会好起来的,如果我可以传入config 作为我的define-callback 函数的名称,但我能做到的唯一方法就是上面的方法。

问题: 如何使用 requireJS 的默认方式或此处的加载器插件提供程序 [https://github.com/millermedeiros/requirejs-plugins/blob/master/examples/async.html]?

在 requireJS 中正确加载 JSONP 文件

这对于从 S3 加载的静态文件非常有效:

define([],
    function () 
        $.ajax(
            url: "http://www.example.com/api/configuration.json",
            dataType: "jsonp",
            jsonpCallback: "config", /* Unique function name */
            success: function(data)
                /* Do something with data */
                console.log(data)
            
        );
    
);

那么为什么在 requireJS 中执行时它不起作用?

【问题讨论】:

这不是 JSONP。您需要编写服务器端代码来处理callback= 所以我不能只用 callback("foo":"bar"); 存储硬编码文件? @SLaks:使用来自静态服务器的$.ajax 没有问题(请参阅我的编辑)。 【参考方案1】:

你错过了一件事:

http://requirejs.org/docs/api.html#jsonp

你应该这样使用:

require(["http://example.com/api/data.json?callback=define"],
    function (data) 
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    
);

callback 是包裹在jsonp 中的对象:

如果您的callbackdefine,则使用define

define(
    "default_language":"de-DE",
    "language_current":"de-DE",
    "language_selector":"translate",
    "language_set":"false"
);

【讨论】:

【参考方案2】:

我遇到了类似的问题,不得不使用$.ajax() 来加载gapi 脚本。 .

【讨论】:

【参考方案3】:

好的。这行得通。

define(["async"],
    function () 
        callback = function(d) 
            console.log("callback called");
             console.log(d);
        ;

        require([
            "async!http://www.example.com/api/configuration.json"
        ],
        callback
        );
    
);

也许还有其他人。

【讨论】:

以上是关于如何在requireJS中加载JSONP?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 RequireJS/AMD 处理循环依赖?

如何使用RequireJS / AMD处理循环依赖?

requireJS搭建

如何在模块中加载未知类?

如何在复合组件中加载资源包属性文件?

如何等待在画布中加载图像