JavaScript函數未定義，但已加載

我正在爲JS課程做我的作業，並且遇到一個奇怪的問題。我已經提出了一個請求'模塊'，我在jquery之後立即開始，然後我加載了基本的js腳本，但是當我嘗試從另一個腳本文件中的請求模塊中使用一個函數時，它總是拋出一個TypeError未定義。奇怪的是，當我console.log這個對象時，它不是不確定的，一切都沒問題。我似乎無法弄清楚爲什麼發生這種情況...我需要一些指導JavaScript函數未定義，但已加載

下面是部分代碼：

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'); 
     }) 
    } 
});

來源

2017-10-15 Стоил Янков

你說的是什麼功能？錯誤應該給你問題所在的行號。 –

雖然有點隱藏，但是它的代碼很隱蔽'request.logIn（name，password）// TYPEERROR UNDEFINED？！？' – Nick

但它實際上是導致錯誤的那一行，即'then（）'。如果OP提供了實際的錯誤消息，即'TypeError：Can not read property'，那麼'未定義'，這將更快地找出（沒有推測性的，完全不符合標準的「答案」）。 –

當您嘗試調用then()方法時，它崩潰，因爲request.logIn()函數返回undefined而不是承諾。這可以追溯到不返回任何東西的makeRequest()函數，即undefined。

在makeRequest()功能您的最後一行必須是：

return $.ajax(req);

來源

2017-10-15 21:31:26

大聲笑..多麼愚蠢的錯誤從我身邊。非常感謝！ –

請嘗試JS請求模塊，這樣return對象，

return { 
    createAuth: createAuth, 
    register: register, 
    logIn: logIn, 
    logout: logout 
}

來源

2017-10-15 21:06:26

將使絕對沒有區別和原始代碼是完全有效的ES6語法 –

您可以嘗試< script>正確的加載腳本屬性：

<!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="../node_modules/handlebars/dist/handlebars.min.js"></script> 
 
    <script defer src="./scripts/request.js"></script> 
 
    <script defer src="./scripts/pageView.js"></script> 
 
    <script defer src="./scripts/app.js"></script> 
 

 
</head> 
 
<body> 
 
<div id="container"> 
 
</div> 
 
</body> 
 
</html>

來源

2017-10-15 21:07:03 lifeisgame

在你的代碼

，函數makeRequest不返回任何值，所以它將返回undefined。嘗試從makeRequest函數返回值。

來源

2017-10-15 21:14:48

JavaScript函數未定義，但已加載

回答

相關問題