From ef3465b7d6f95f2f0f85f016c7e78a144482762c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jeh=C3=BA=20Sagardoy=20Mart=C3=ADn?= Date: Tue, 20 Mar 2018 16:32:02 +0100 Subject: [PATCH 1/4] Update main.js Changes made to ensure that Houses are loaded and displayed before Characters --- 01 Non blocking/src/js/main.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/01 Non blocking/src/js/main.js b/01 Non blocking/src/js/main.js index 357fbfa..2c243e1 100644 --- a/01 Non blocking/src/js/main.js +++ b/01 Non blocking/src/js/main.js @@ -9,20 +9,22 @@ document.onreadystatechange = () => { event.stopPropagation(); const houseInput = document.getElementById('input-house'); const characterInput = document.getElementById('input-character'); - + if (houseInput.value && characterInput.value) { console.log('1'); const housesRequestConfig = { err: handleError, callback: handleHousesRequestSucces(apiMapper, printer) }; - service.getHousesByName(houseInput.value, housesRequestConfig); - console.log('2'); - const charactersRequestConfig = { - err: handleError, - callback: handleCharactersRequestSuccess(apiMapper, printer) - }; - service.getCharactersByName(characterInput.value, charactersRequestConfig); + service.getHousesByName(houseInput.value, housesRequestConfig); + setTimeout(() => { + console.log('2'); + const charactersRequestConfig = { + err: handleError, + callback:handleCharactersRequestSuccess(apiMapper, printer) + }; + service.getCharactersByName(characterInput.value, charactersRequestConfig); + },3000); console.log('3'); } else { alert('Introduce a values') From 27a51f1d1a390bcc1d47017a4e110244fe7df62c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jeh=C3=BA=20Sagardoy=20Mart=C3=ADn?= Date: Tue, 20 Mar 2018 16:57:56 +0100 Subject: [PATCH 2/4] Update README.md A few corrections with english expressions and typos. --- 01 Non blocking/README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/01 Non blocking/README.md b/01 Non blocking/README.md index 70ded49..db9186e 100644 --- a/01 Non blocking/README.md +++ b/01 Non blocking/README.md @@ -6,7 +6,7 @@ $ npm install ``` * After installation, we can run the application using: ```bash -$ npm install +$ npm start ``` * To get results on the open browser app: * house: `House Lannister of Casterly Rock` @@ -14,14 +14,15 @@ $ npm install ## In this demo we are going to study the non blocking nature of JavaScript -* Just one thing can happen per time in JavaScript. But the required time to get data loaded is really short. Is not just to have a really good network capabilities, there is another reason. +* Just one thing can happen at a time in JavaScript. But the required time to get data loaded is really short. This is not just because good network capabilities. There is another reason. -* Looking into the code this reason is not so obviously.We can think looking the `main.js` code that: +* Looking into the code, this reason doesn't seem so obvious. We could think, by looking at `main.js` code, that: * While this request `service.getHousesByName(houseInput.value, housesRequestConfig);` does not end... * This one `service.getCharactersByName(characterInput.value, charactersRequestConfig);` is not going to start -* If we already have been working with callbacks, we are use to initialize a request and then proceed with the execution. +* If we have been already working with callbacks, we are used to initialize a request and then proceed with the execution. + +* But if just one thing at a time is executed, how is this possible? -* But if just one thing per time it's executed, how is this possible? +* Inside Chrome developer tools, on the network tab, we can notice that the requests are being sent concurrently. -* Opening the developer tools on Chrome, open the network tab. Here we can watch that the requests are sending concurrently. From 0f1b01251babfe2b9aa1a1a813236b723ea46920 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jeh=C3=BA=20Sagardoy=20Mart=C3=ADn?= Date: Wed, 21 Mar 2018 12:08:32 +0100 Subject: [PATCH 3/4] Update main.js Changes made to use callbacks: + Changed solution to fit callback implementation + Added new function getCharacters + Remake and rename for handleHousesRequestSuccess (there was a typo in handleHousesRequestSuccess function) --- 01 Non blocking/src/js/main.js | 39 +++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/01 Non blocking/src/js/main.js b/01 Non blocking/src/js/main.js index 2c243e1..88dbfc8 100644 --- a/01 Non blocking/src/js/main.js +++ b/01 Non blocking/src/js/main.js @@ -12,35 +12,43 @@ document.onreadystatechange = () => { if (houseInput.value && characterInput.value) { console.log('1'); - const housesRequestConfig = { - err: handleError, - callback: handleHousesRequestSucces(apiMapper, printer) - }; + const charactersRequestConfig = { + err: handleError, + callback:handleCharactersRequestSuccess(apiMapper, printer), + charService: service, + charName: characterInput.value + }; + const housesRequestConfig = { + err: handleError, + callback: handleHousesRequestSuccess(apiMapper, printer, getCharacters, charactersRequestConfig) + }; + console.log('house call'); service.getHousesByName(houseInput.value, housesRequestConfig); - setTimeout(() => { - console.log('2'); - const charactersRequestConfig = { - err: handleError, - callback:handleCharactersRequestSuccess(apiMapper, printer) - }; - service.getCharactersByName(characterInput.value, charactersRequestConfig); - },3000); - console.log('3'); + console.log('3'); } else { - alert('Introduce a values') + alert('Introduce values') } }); }; + function getCharacters (charactersRequestConfig) { + //const service = new apiIceAndFire.Service(); + charactersRequestConfig.charService.getCharactersByName(charactersRequestConfig.charName, charactersRequestConfig); + console.log('character Call'); + } + function handleError() { console.log(JSON.parse(this.responseText)); }; - function handleHousesRequestSucces(apiMapper, printer) { + function handleHousesRequestSuccess(apiMapper, printer, callback, charactersRequestConfig) { return function () { const data = JSON.parse(this.responseText); const houses = apiMapper.housesMap(data); printer.printHouses(houses, 'houses'); + if(callback){ + callback(charactersRequestConfig); + } }; }; @@ -56,3 +64,4 @@ document.onreadystatechange = () => { load(); } }; + From aae310f110ad270bfabacc3ee4a464d7a9f632ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jeh=C3=BA=20Sagardoy=20Mart=C3=ADn?= Date: Wed, 21 Mar 2018 12:10:50 +0100 Subject: [PATCH 4/4] Update README.md updated --- 01 Non blocking/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/01 Non blocking/README.md b/01 Non blocking/README.md index db9186e..e0be106 100644 --- a/01 Non blocking/README.md +++ b/01 Non blocking/README.md @@ -25,4 +25,3 @@ $ npm start * But if just one thing at a time is executed, how is this possible? * Inside Chrome developer tools, on the network tab, we can notice that the requests are being sent concurrently. -