在与requirejs一起使用时未定义gapi错误

本文介绍了在与requirejs一起使用时未定义gapi错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试使用requireJS加载google API文件，但出现错误， 有人认为我可以低估Google通话之前正在加载GP文件

I am trying to load google API files with requireJS, but getting an error of, One think I can understated that GP file is loading before the google's call

"gp.js:23 Uncaught ReferenceError:未定义gapi"

这是

gp.js文件

function logout() { gapi.auth.signOut(); location.reload(); } function login() { var myParams = { 'clientid' : '900278902057-ppqm358qrhki089danipqguj3i4ir70i.apps.googleusercontent', 'cookiepolicy' : 'single_host_origin', 'callback' : 'loginCallback', 'approvalprompt':'force', 'scope' : 'www.googleapis/auth/plus.login www.googleapis/auth/plus.me www.googleapis/auth/userinfo.email www.googleapis/auth/userinfo.profile' }; gapi.auth.signIn(myParams); } function loginCallback(result) { if(result['status']['signed_in']) { var request = gapi.client.plus.people.get( { 'userId': 'me' }); request.execute(function (resp) { var email = ''; if(resp['emails']) { for(i = 0; i < resp['emails'].length; i++) { if(resp['emails'][i]['type'] == 'account') { email = resp['emails'][i]['value']; } } } var str = "Name:" + resp['displayName'] + "<br>"; // str += "Image:" + resp['image']['url'] + "<br>"; // str += "<img src='" + resp['image']['url'] + "' /><br>"; // str += "URL:" + resp['url'] + "<br>"; str += "Email:" + email + "<br>"; str += "DOB:" + resp['birthday'] + "<br>"; str += "Gender:" + resp['gender'] + "<br>"; document.getElementById("profile").innerHTML = str; }); } } function onLoadCallback() { gapi.client.setApiKey('AIzaSyBy08qpAjR9U1nKaZ5H1MmwTuthspQPNqY'); gapi.client.load('plus', 'v1',function(){}); }

以及requirejs文件-main.js

require.config({ shim: { 'jquery': { exports: '$' }, /* 'backbone': { deps: ['jquery', 'underscore'], },*/ 'googleplus' : { deps: ['jquery'], exports: 'gapi' }, }, paths: { 'jquery': '//code.jquery/jquery-1.11.0.min', 'googleplus': 'apis.google/js/plus.js?onload=init', } }) require(['gp']);

和html按钮

<input type="button" value="Login" onclick="login()" /> <input type="button" value="Logout" onclick="logout()" />

当我在没有requireJS的情况下尝试时，相同的代码可以完美地工作，但问题是我必须使用requireJS

the same code works perfectly when I try without requireJS, but the thing is I have to do with requireJS

推荐答案

gp.js 必须是一个模块.

define(['jquery', 'googleplus'], function($, gapi) { # your code window.loginCallback = function (result) { if (result['status']['signed_in']) { gapi.client.load('plus', 'v1', function () { var request = gapi.client.plus.people.get( { 'userId': 'me' }); request.execute(function (resp) { var email = ''; if (resp['emails']) { for (i = 0; i < resp['emails'].length; i++) { if (resp['emails'][i]['type'] == 'account') { email = resp['emails'][i]['value']; } } } var str = "Name:" + resp['displayName'] + "<br>"; str += "Email:" + email + "<br>"; str += "DOB:" + resp['birthday'] + "<br>"; str += "Gender:" + resp['gender'] + "<br>"; document.getElementById("profile").innerHTML = str; }); }); } }; $('#login').click(login); $('#logout').click(logout); });

并修改模板:

<input type="button" value="Login" id="login" /> <input type="button" value="Logout" id="logout" />

由于gapi.signIn方法要求在全局名称空间中使用回调函数，因此loginCallback函数必须是全局的.

Because gapi.signIn method require callback function in global namespace, loginCallback function must be global.