2017-10-15 12 views
0

JSコースの宿題をしていますが、私は奇妙な問題に直面しています。私はjqueryの直後にjqueryの直後にある 'module'というリクエストを作成した後、必須の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'); 
     }) 
    } 
}); 
+0

について、あなたは何の機能を話していますか?エラーは、問題のある行番号を示すはずです。 –

+0

これは彼のコードの中にありますが、 'request.logIn(name、password)// TYPEERROR UNDEFINED?!?' – Nick

+0

ですが、実際は 'then()'というエラーを引き起こす次の行です。 OPが実際のエラーメッセージを提供していた場合、これは(TypeError:プロパティを読み取ることができず、次に '未定義のもの'です) –

答えて

0

then()メソッドを呼び出すときに、request.logIn()関数が約束の代わりにundefinedを返すため、クラッシュします。これは、何も返さないmakeRequest()関数、つまりundefinedにトレースされます。

makeRequest()機能であなたの最後の行をする必要があります:

return $.ajax(req); 
+0

Lol ..私の側からどういう愚かな誤りがありますか?どうもありがとうございます! –

1

あなたが< scriptを試すことができます

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

これは、投機的で完全にオフのマークの "回答"なしで、違いは全くありませんし、元のコードは完全に有効です。ES6の構文 –

0

、このようなJS要求モジュールにreturnオブジェクトを試してみてください>は、正しいロードスクリプトの属性:あなたのコード内で

<!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>

0

、関数makeRequestは値を返しませんので、undefinedを返します。 makeRequest関数から値を返してみてください。

関連する問題