使用requirejs超时加载异步资源

Question

我尝试使用requirejs和async插件加载Google APIs客户端JavaScript库：

require.config({
    paths : {
        async : '../lib/requirejs/async'
    },
    waitSeconds: 60
});

define('gapi', ['async!https://apis.google.com/js/client.js!callback'],
    function(){
        console.log('gapi loaded');
        return gapi.client;
    }
);

require(['gapi'], function(){
    console.log("Callback");
    console.log(gapi);
});

通常加载此库的方式是： 点击这里。

<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

所有内容都在2秒内加载完毕，但我总是会遇到这个错误：

Uncaught Error: Load timeout for modules: async!https://apis.google.com/js/client.js!callback_unnormalized2,async!https://apis.google.com/js/client.js!callback
http://requirejs.org/docs/errors.html#timeout 

- Sydney

---

请问您在使用r.js（requirejs优化器）进行优化后，是否能让这个程序正常工作？对我来说，在普通情况下是可以工作的，但在优化后就不能正常工作了。 - I.Tyger

你在优化之后成功解决了吗？ - jssridhar

Answer 1

TL;DR; 将 !callback 改为 !onload，这样应该就可以解决超时问题了。

define('gapi', ['async!https://apis.google.com/js/client.js!onload'],
    function(){
        console.log('gapi loaded');
        return gapi.client;
    }
);

!后面的值被用作异步回调函数的参数名，在本例中，加载的URI将类似于https://apis.google.com/js/client.js?onload=__async_req_3__，其中__async_req_3__是一个全局变量（回调函数），一旦Google API加载完成就会触发它（通知插件所有依赖项都已满足）。

- Miller Medeiros

---

你可能只需要返回 gapi，而不是 gapi.client。 - Darren Shewry

我已经尝试过这个方法，如果我没有使用grunt进行构建，它是有效的。但是一旦我使用grunt进行构建，它会将gapi对象标记为未定义。 - I.Tyger