我正在做 JS 类(class)的作业，遇到一个奇怪的问题。我在 jquery 之后一开始就发出了一个请求“模块”，然后我正在加载基本的 js 脚本，但是当我尝试在另一个脚本文件中使用请求模块中的函数时，它总是会抛出 TypeError不明确的。奇怪的是，当我 console.log 对象时，它不是未定义的，一切都很好。我似乎无法弄清楚为什么会发生这种情况......我需要一些指导
这是部分代码:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SeenIt</title>
<link rel="stylesheet" href="style/site.css">
<link rel="stylesheet" href="style/post.css">
<link rel="stylesheet" href="style/header.css">
<link rel="stylesheet" href="style/menu.css">
<link rel="stylesheet" href="style/notifications.css">
<link rel="stylesheet" href="style/submit.css">
<link rel="stylesheet" href="style/comments.css">
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="./scripts/request.js"></script>
<script src="../node_modules/handlebars/dist/handlebars.min.js"></script>
<script src="./scripts/pageView.js"></script>
<script src="./scripts/app.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
我的JS请求模块
let request = (function (){
const appKey = 'kid_rkR4UTRnb';
const appSecret = 'd3e9f15502a740fcb1413d7ffe109ab5';
const baseUrl = 'https://baas.kinvey.com';
function createAuth(type)
{
let authorize = {"Content-Type": "application/json"};
if(type === 'basic')
{
authorize.Authorization = "Basic " + btoa(appKey + ':' + appSecret);
}
else if(type === 'kinvey')
{
authorize.Authorization = "Kinvey " + localStorage.getItem('authtoken');
}
return authorize;
}
function makeRequest(destination, endpoint, method, authorization, data)
{
let req = {
url: baseUrl + '/' + destination + '/' + endpoint,
method: method,
headers: createAuth(authorization),
};
if(data != undefined) req.data = JSON.stringify(data);
$.ajax(req);
}
function register(username, password)
{
let data = {
"username": username,
"password": password
};
return makeRequest('user', appKey, 'POST', 'basic', data);
}
function logIn(username, password)
{
let data = {
"username": username,
"password": password
};
return makeRequest('user', appKey + '/login', 'POST', 'basic', data);
}
function logout()
{
makeRequest('user', appKey + '/_logout', 'POST', 'kinvey');
}
return {
createAuth,
register,
logIn,
logout
}
})();
主要 JS 应用程序文件
$(() => {
let main = $('#container');
initialState();
$(document).ajaxStart(() => $('#loadingBox').show());
$(document).ajaxComplete(() => $('#loadingBox').hide());
$('#infoBox').click(() => $('#infoBox').hide());
$('#errorBox').click(() => $('#errorBox').hide());
$(document).on('submit', '#loginForm', login);
async function viewPage(page)
{
if(page == 'home')
{
main.html(await loadWelcome(isLoggedIn()));
}
}
// initial functions
function initialState()
{
viewPage('home');
}
///////////////
// session control
function login(e)
{
e.preventDefault();
let loginForm = $(this);
let name = loginForm.find('input[name="username"]').val();
let password = loginForm.find('input[name="password"]').val();
request.logIn(name, password) // TYPEERROR UNDEFINED ?!?
.then(data => {
request.saveSession(data);
this.reset();
viewPage('home');
})
}
});
最佳答案
当您尝试调用 then() 方法时，它会崩溃，因为 request.logIn() 函数返回 undefined 而不是 promise 。这可以追溯到 makeRequest() 函数，它不返回任何内容，即 undefined。
makeRequest() 函数中的最后一行必须是:
return $.ajax(req);
关于JavaScript 函数虽然已加载但未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46759922/