如何使用 requirejs 处理 ajax 回调？答案

【问题标题】：How to use requirejs to work with ajax callbacks?如何使用 requirejs 处理 ajax 回调？
【发布时间】：2013-09-09 18:09:35
【问题描述】：

如果我必须利用 jQuery AJAX API 的优点并为我的应用程序进行的每个 ajax 调用设置我自己的自定义设置，如下所示：

假设我有一个页面，它通过对某些 API 进行 ajax 调用来显示表中的员工信息。

define(["jQuery"], function($) {
    var infoTable = function (options) {

        function init() {
            // Provide success callback
            options.success_callback = "renderData";
            getData();
        }

        function renderData() {
            // This callback function won't be called as it is not 
            // in global scope and instead $.ajax will try to look 
            // for function named 'renderData' in global scope.
            // How do I pass callbacks defined within requirejs define blocks?
        }

        function getData() {
            $.ajax({
                url: options.apiURL,
                dataType: options.format,
                data: {
                    format: options.format,
                    APIKey: options.APIKey,
                    source: options.source,
                    sourceData: options.sourceData,
                    count: options.count,
                    authMode: options.authMode
                },
                method: options.method,
                jsonpCallback: options.jsonpCallback,
                success: options.success_callback,
                error: options.error_callback,
                timeout: options.timeout
            });
        }
    }

    return {
        init: init
    }
}

我如何实现这一目标？

我知道我们可以将 JSONP 请求用作 require 调用，但这限制了我使用 jsonp、发出 GET 请求和 $.ajax 提供的所有其他功能。

【问题讨论】：

这段代码有什么问题？这和 require.js 有什么关系？
你为什么使用 JSONP 而不是普通的 JSON？您可以发布示例回复吗？
抱歉不清楚，我已经更新了问题。全部原因是在 requirejs 定义块中传递回调。
将函数引用传递给success 等回调函数，而不是字符串。
您正在返回 init:undefined - 这无助于您的情况。

标签： javascript jquery ajax callback requirejs

【解决方案1】：

This example 允许您使用默认的成功回调，或提供覆盖，使用：

success: options.successCallback || renderData

（该示例使用 jsfiddle REST URL - 这个事实并不重要，并剥离了数据对象以保持示例简短）

define("mymodule", ["jquery"], function($) {
    function renderData() {
        console.log("inside callback");
    }

    function getData(options) {
        $.ajax({
            url: options.apiURL,
            dataType: options.format,
            method: options.method,
            jsonpCallback: options.jsonpCallback,
            success: options.successCallback || renderData,
            error: null,
            timeout: options.timeout
        });
    }

    return {
        getData: getData
    }
});

require(["mymodule"], function(m) {
    console.log(m, m.getData({
        apiURL: "/echo/json/"
    }));
    console.log(m, m.getData({
        successCallback: function() { console.log("outside callback"); },
        apiURL: "/echo/json/"
    }));
});

将打印：

GET http://fiddle.jshell.net/echo/json/ 200 OK      263ms
Object { getData=getData()} undefined
GET http://fiddle.jshell.net/echo/json/ 200 OK      160ms
Object { getData=getData()} undefined
inside callback
outside callback

【讨论】：

感谢 Paul 抽出宝贵时间。您是否在 jsfiddle 中运行此代码？如果是的话，你能把菲德尔网址发给我吗？我的理解是......由于 ajax 回调将在全局范围内执行并且 'renderData' 是在 'mymodule' 中定义的，因此不会记录 'inside callback'。
当你传入一个本地函数引用时，执行范围并不重要。 jQuery 将使用传递给它的函数引用，而不是尝试查找全局函数。我将添加小提琴 URL。
我同意第二个 console.log 调用，您可以在其中传入本地函数定义。但我猜不是第一个传递函数引用的 console.log 调用。
它们都是函数引用。 renderData 是模块中的命名函数。 function() { console.log("outside callback"); } 是一个匿名函数，但也作为函数引用传递。 jQuery 使用引用，并且不需要针对任何特定范围查找函数。