2017-10-15 6 views
0

Je fais mes devoirs pour un cours JS et je suis confronté à un problème étrange. J'ai fait une requête 'module' que je suis au tout début juste après jquery puis je charge les scripts js essentiels mais quand j'essaie d'utiliser une fonction du module request dans un autre fichier script, il lance toujours un TypeError indéfini. L'étrange est que lorsque je console.log l'objet n'est pas indéfini et tout va bien. Je ne peux pas sembler comprendre pourquoi ce qui se passe ... et je besoin d'une ligne directriceLa fonction JavaScript n'est pas définie bien qu'elle soit chargée

Voici une partie du code:

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> 

Mon JS demande Module

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 
    } 

})(); 

principal JS fichier App

$(() => { 
    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

Quelle fonction parlez-vous? L'erreur devrait vous donner le numéro de ligne où se trouve le problème. –

+0

C'est dans son code, bien qu'un peu enterré 'request.logIn (nom, mot de passe) // TYPEERROR UNDEFINED?!?' – Nick

+0

Mais c'est en fait la ligne suivante qui provoque l'erreur, c'est-à-dire 'then()'. Cela aurait été beaucoup plus rapide à comprendre (sans spéculatif, complètement hors-marque "réponses") si OP avait fourni le message d'erreur réel, qui est 'TypeError: Impossible de lire la propriété' puis 'de undefined' –

Répondre

0

Il se bloque lorsque vous essayez d'appeler la méthode then() car la fonction request.logIn() renvoie undefined au lieu d'une promesse. Cela peut être lié à la fonction makeRequest() qui ne renvoie rien, c'est-à-dire undefined.

Votre dernière ligne dans la fonction makeRequest() doit être:

return $.ajax(req); 
+0

Lol .. quelle erreur stupide de mon côté. Merci beaucoup! –

1

S'il vous plaît essayer return objet sur JS demande Module comme celui-ci,

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

ne fera absolument aucune différence et le code d'origine est parfaitement valide syntaxe ES6 –

0

Vous pouvez < script> attributs pour les scripts de chargement correct:

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

dans votre code, function makeRequest ne renvoie aucune valeur, donc il retournera undefined. essayez de renvoyer la valeur de la fonction makeRequest.