From fe49278cba080dae7c9fd1ea414d73a03b608774 Mon Sep 17 00:00:00 2001 From: Juan Gonzalez Date: Sat, 18 Jul 2020 18:28:25 -0500 Subject: [PATCH 1/7] [ADD] --- package-lock.json | 13 ++++++++++++ package.json | 54 +++++++++++++++++++++++------------------------ 2 files changed, 40 insertions(+), 27 deletions(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e8c8dbc --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "escuelajs-reto-03", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "xmlhttprequest": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", + "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=" + } + } +} diff --git a/package.json b/package.json index 65a8bf2..051f55a 100644 --- a/package.json +++ b/package.json @@ -1,27 +1,27 @@ -{ - "name": "escuelajs-reto-03", - "version": "1.0.0", - "description": "Reto 3 Septiembre 14: Curso de Fundamentos de JavaScript", - "main": "index.js", - "scripts": { - "start": "node src/index.js" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/platzi/escuelajs-reto-03.git" - }, - "keywords": [ - "javascript", - "escuelajs", - "node" - ], - "author": "Oscar Barajas ", - "license": "MIT", - "bugs": { - "url": "https://github.com/platzi/escuelajs-reto-03/issues" - }, - "homepage": "https://github.com/platzi/escuelajs-reto-03#readme", - "dependencies": { - "xmlhttprequest": "^1.8.0" - } -} \ No newline at end of file + { + "name": "escuelajs-reto-03", + "version": "1.0.0", + "description": "Reto 3 Septiembre 14: Curso de Fundamentos de JavaScript", + "main": "index.js", + "scripts": { + "start": "node src/index.js" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/platzi/escuelajs-reto-03.git" + }, + "keywords": [ + "javascript", + "escuelajs", + "node" + ], + "author": "Oscar Barajas ", + "license": "MIT", + "bugs": { + "url": "https://github.com/platzi/escuelajs-reto-03/issues" + }, + "homepage": "https://github.com/platzi/escuelajs-reto-03#readme", + "dependencies": { + "xmlhttprequest": "^1.8.0" + } + } \ No newline at end of file From b3c64144f4cff6b7484aa9979a8dd8622faa83ce Mon Sep 17 00:00:00 2001 From: Juan Gonzalez Date: Sun, 19 Jul 2020 23:45:54 -0500 Subject: [PATCH 2/7] [RESOLVE ERROR] --- src/index.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index d6fa599..55b5a21 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,21 @@ -var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; +let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; -var API = 'https://rickandmortyapi.com/api/character/'; -var xhttp = new XMLHttpRequest(); +let API = 'https://rickandmortyapi.com/api/character/'; function fetchData(url_api, callback) { + let xhttp = new XMLHttpRequest(); + xhttp.open('GET', url_api, true); xhttp.onreadystatechange = function (event) { - if (xhttp.readyState === '4') { - if (xhttp.status == 200) - callback(null, xhttp.responseText); - else return callback(url_api); + if (xhttp.readyState === 4) { + if (xhttp.status == 200) { + callback(null, JSON.parse(xhttp.responseText)); + } + else { + const error = new Error('Wooops! ' + url_api) + return callback(error, null); + } } }; - xhttp.open('GET', url_api, false); xhttp.send(); }; @@ -19,7 +23,7 @@ fetchData(API, function (error1, data1) { if (error1) return console.error('Error' + ' ' + error1); console.log('Primer Llamado...') fetchData(API + data1.results[0].id, function (error2, data2) { - if (error2) return console.error(error1); + if (error2) return console.error(error2); console.log('Segundo Llamado...') fetchData(data2.origin.url, function (error3, data3) { if (error3) return console.error(error3); From 2c32f3ab47f55f5eb8dd2d79a30684721cfd6d6c Mon Sep 17 00:00:00 2001 From: Juan Gonzalez Date: Sun, 19 Jul 2020 23:51:20 -0500 Subject: [PATCH 3/7] [RESOLVE ERROR2] ES6 --- src/index.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 55b5a21..c507df0 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ let API = 'https://rickandmortyapi.com/api/character/'; function fetchData(url_api, callback) { let xhttp = new XMLHttpRequest(); xhttp.open('GET', url_api, true); - xhttp.onreadystatechange = function (event) { + xhttp.onreadystatechange = event => { if (xhttp.readyState === 4) { if (xhttp.status == 200) { callback(null, JSON.parse(xhttp.responseText)); @@ -19,18 +19,18 @@ function fetchData(url_api, callback) { xhttp.send(); }; -fetchData(API, function (error1, data1) { - if (error1) return console.error('Error' + ' ' + error1); +fetchData(API, (error1, data1) => { + if (error1) return console.error(`Error ${error1}`); console.log('Primer Llamado...') - fetchData(API + data1.results[0].id, function (error2, data2) { + fetchData(API + data1.results[0].id, (error2, data2) => { if (error2) return console.error(error2); console.log('Segundo Llamado...') fetchData(data2.origin.url, function (error3, data3) { if (error3) return console.error(error3); console.log('Tercero Llamado...') - console.log('Personajes:' + ' ' + data1.info.count); - console.log('Primer Personaje:' + ' ' + data2.name); - console.log('Dimensión:' + ' ' + data3.dimension); + console.log(`Personajes: ${data1.info.count}`); + console.log(`Primer Personaje: ${data2.name}`); + console.log(`Dimensión: ${data3.dimension}`); }); }); }); \ No newline at end of file From dd3c946ab327045d9d988c8dc8477c4c3d00c575 Mon Sep 17 00:00:00 2001 From: Juan Gonzalez Date: Mon, 20 Jul 2020 16:06:27 -0500 Subject: [PATCH 4/7] [PROMISE] resolve error callback hell --- src/index.js | 75 +++++++++++++++++++++++++++++++++------------------- 1 file changed, 48 insertions(+), 27 deletions(-) diff --git a/src/index.js b/src/index.js index c507df0..e1492b0 100644 --- a/src/index.js +++ b/src/index.js @@ -2,35 +2,56 @@ let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; let API = 'https://rickandmortyapi.com/api/character/'; -function fetchData(url_api, callback) { +function fetchData(url_api) { let xhttp = new XMLHttpRequest(); - xhttp.open('GET', url_api, true); - xhttp.onreadystatechange = event => { - if (xhttp.readyState === 4) { - if (xhttp.status == 200) { - callback(null, JSON.parse(xhttp.responseText)); + return new Promise((resolve, reject) => { + xhttp.open('GET', url_api, true); + xhttp.onreadystatechange = event => { + if (xhttp.readyState === 4) { + if (xhttp.status == 200) { + resolve(JSON.parse(xhttp.responseText)); + } + else { + const error = new Error('Wooops! ' + url_api) + return reject(error); + } } - else { - const error = new Error('Wooops! ' + url_api) - return callback(error, null); - } - } - }; - xhttp.send(); + }; + xhttp.send(); + }) }; -fetchData(API, (error1, data1) => { - if (error1) return console.error(`Error ${error1}`); - console.log('Primer Llamado...') - fetchData(API + data1.results[0].id, (error2, data2) => { - if (error2) return console.error(error2); +fetchData(API) + .then(response => { + console.log('Primer Llamado...') + console.log(`Personajes: ${response.info.count}`); + return fetchData(API + response.results[0].id) + }) + .then(response => { console.log('Segundo Llamado...') - fetchData(data2.origin.url, function (error3, data3) { - if (error3) return console.error(error3); - console.log('Tercero Llamado...') - console.log(`Personajes: ${data1.info.count}`); - console.log(`Primer Personaje: ${data2.name}`); - console.log(`Dimensión: ${data3.dimension}`); - }); - }); -}); \ No newline at end of file + console.log(`Primer Personaje: ${response.name}`); + return fetchData(response.origin.url) + + }) + .then(response => { + console.log('Tercero Llamado...') + console.log(`Dimensión: ${response.dimension}`); + return fetchData(API) + }) + .catch(error => console.error(`Error ${error}`)) + +// fetchData(API, (error1, data1) => { +// if (error1) return console.error(`Error ${error1}`); +// console.log('Primer Llamado...') +// fetchData(API + data1.results[0].id, (error2, data2) => { +// if (error2) return console.error(error2); +// console.log('Segundo Llamado...') +// fetchData(data2.origin.url, function (error3, data3) { +// if (error3) return console.error(error3); +// console.log('Tercero Llamado...') +// console.log(`Personajes: ${data1.info.count}`); +// console.log(`Primer Personaje: ${data2.name}`); +// console.log(`Dimensión: ${data3.dimension}`); +// }); +// }); +//}); \ No newline at end of file From 2b06ba91dcaccf6dc175cc44e3a473f0a8a82e9b Mon Sep 17 00:00:00 2001 From: Juan Gonzalez Date: Mon, 20 Jul 2020 18:34:32 -0500 Subject: [PATCH 5/7] [ASYNC/AWAIT] change the promiese in async/await succesfull --- src/index.js | 99 +++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 78 insertions(+), 21 deletions(-) diff --git a/src/index.js b/src/index.js index e1492b0..45c5da3 100644 --- a/src/index.js +++ b/src/index.js @@ -2,43 +2,100 @@ let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; let API = 'https://rickandmortyapi.com/api/character/'; -function fetchData(url_api) { - let xhttp = new XMLHttpRequest(); +const fetchData = url_api => { + const xhttp = new XMLHttpRequest(); return new Promise((resolve, reject) => { xhttp.open('GET', url_api, true); - xhttp.onreadystatechange = event => { + xhttp.onreadystatechange = (event => { if (xhttp.readyState === 4) { if (xhttp.status == 200) { resolve(JSON.parse(xhttp.responseText)); } else { - const error = new Error('Wooops! ' + url_api) - return reject(error); + reject(new Error('Wooops! ' + url_api)); } } - }; + }); xhttp.send(); }) }; - -fetchData(API) - .then(response => { +const fetchD1 = async (url_api) => { + try { + const response = await fetchData(url_api) + const data = await fetchData(`${API}${response.results[0].id}`) + const origin = await fetchData(data.origin.url) console.log('Primer Llamado...') console.log(`Personajes: ${response.info.count}`); - return fetchData(API + response.results[0].id) - }) - .then(response => { console.log('Segundo Llamado...') - console.log(`Primer Personaje: ${response.name}`); - return fetchData(response.origin.url) - - }) - .then(response => { + console.log(`Primer Personaje: ${data.name}`); console.log('Tercero Llamado...') - console.log(`Dimensión: ${response.dimension}`); - return fetchData(API) - }) - .catch(error => console.error(`Error ${error}`)) + console.log(`Dimensión: ${origin.dimension}`); + } catch (error) { + console.error(error) + } + +} + +//const fetchD2 = async (url_api) => { +// try { +// const response = await fetchData(url_api) +// console.log('Segundo Llamado...') +// console.log(`Primer Personaje: ${response.results[4].name}`); +// } catch (error) { +// console.error(error) +// } +//} +// +//const fetchD3 = async (url_api) => { +// try { +// const response = await fetchData(url_api) +// console.log('Tercero Llamado...') +// console.log(`Dimensión: ${response.dimension}`); +// } catch (error) { +// console.error(error) +// } +//} +//const fechD2 = async () => { +//const data = await fetchData(API + response.result[0].id) +//console.log(`Primer Personaje: ${data.response.name}`); + +//console.log('Primer Llamado...') +//return response.results[0].id +// try { +// const response = await fetchData(API + data.results[0].id) +// console.log('Segundo Llamado...') +// console.log(`Primer Personaje: ${response.name}`, data); +// } catch{ +// +// } +//} +//const fechD3 = async () => { +// const response = await fetchData(API) +// //const data = await response.results[0].id +// console.log('Tercero Llamado...') +// console.log(`Dimensión: ${response.dimension}`); +// return fetchData(API) +//} +fetchD1(API) + +//fetchData(API) +// .then(response => { +// console.log('Primer Llamado...') +// console.log(`Personajes: ${response.info.count}`); +// return fetchData(API + response.results[0].id) +// }) +// .then(response => { +// console.log('Segundo Llamado...') +// console.log(`Primer Personaje: ${response.name}`); +// return fetchData(response.origin.url) +// +// }) +// .then(response => { +// console.log('Tercero Llamado...') +// console.log(`Dimensión: ${response.dimension}`); +// return fetchData(API) +// }) +// .catch(error => console.error(`Error ${error}`)) // fetchData(API, (error1, data1) => { // if (error1) return console.error(`Error ${error1}`); From c462e825b3425620ab353ad894c4c874c3e83927 Mon Sep 17 00:00:00 2001 From: Juan Gonzalez Date: Mon, 20 Jul 2020 18:36:01 -0500 Subject: [PATCH 6/7] [ASYNC/AWAIT] change the promiese in async/await succesfull --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 45c5da3..e9ced38 100644 --- a/src/index.js +++ b/src/index.js @@ -36,6 +36,8 @@ const fetchD1 = async (url_api) => { } +fetchD1(API) + //const fetchD2 = async (url_api) => { // try { // const response = await fetchData(url_api) @@ -76,7 +78,6 @@ const fetchD1 = async (url_api) => { // console.log(`Dimensión: ${response.dimension}`); // return fetchData(API) //} -fetchD1(API) //fetchData(API) // .then(response => { From 2b0a7b38e5e6a05496094d9c3e216cf8866d5125 Mon Sep 17 00:00:00 2001 From: Juanda1803 Date: Fri, 11 Sep 2020 11:56:02 -0500 Subject: [PATCH 7/7] [ADD] xmlhttprequest --- PULL_REQUEST_TEMPLATE.md | 10 +++++--- package.json | 54 ++++++++++++++++++++-------------------- src/index.js | 38 ++++++++++++++-------------- 3 files changed, 51 insertions(+), 51 deletions(-) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index e85525b..9529b6f 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -4,10 +4,12 @@ Nombre: Usuario Platzi: ## Ciudad + - [ ] Ciudad de México -- [ ] Bogotá +- [x] Bogotá # Retos: - - [ ] Primer problema - - [ ] Segundo problema - - [ ] Tercer problema + +- [x] Primer problema +- [x] Segundo problema +- [x] Tercer problema diff --git a/package.json b/package.json index 051f55a..dbaa2f1 100644 --- a/package.json +++ b/package.json @@ -1,27 +1,27 @@ - { - "name": "escuelajs-reto-03", - "version": "1.0.0", - "description": "Reto 3 Septiembre 14: Curso de Fundamentos de JavaScript", - "main": "index.js", - "scripts": { - "start": "node src/index.js" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/platzi/escuelajs-reto-03.git" - }, - "keywords": [ - "javascript", - "escuelajs", - "node" - ], - "author": "Oscar Barajas ", - "license": "MIT", - "bugs": { - "url": "https://github.com/platzi/escuelajs-reto-03/issues" - }, - "homepage": "https://github.com/platzi/escuelajs-reto-03#readme", - "dependencies": { - "xmlhttprequest": "^1.8.0" - } - } \ No newline at end of file +{ + "name": "escuelajs-reto-03", + "version": "1.0.0", + "description": "Reto 3 Septiembre 14: Curso de Fundamentos de JavaScript", + "main": "index.js", + "scripts": { + "start": "node src/index.js" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/platzi/escuelajs-reto-03.git" + }, + "keywords": [ + "javascript", + "escuelajs", + "node" + ], + "author": "Oscar Barajas ", + "license": "MIT", + "bugs": { + "url": "https://github.com/platzi/escuelajs-reto-03/issues" + }, + "homepage": "https://github.com/platzi/escuelajs-reto-03#readme", + "dependencies": { + "xmlhttprequest": "^1.8.0" + } +} diff --git a/src/index.js b/src/index.js index e9ced38..bbd070c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,42 +1,40 @@ let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; -let API = 'https://rickandmortyapi.com/api/character/'; +let API = "https://rickandmortyapi.com/api/character/"; -const fetchData = url_api => { +const fetchData = (url_api) => { const xhttp = new XMLHttpRequest(); return new Promise((resolve, reject) => { - xhttp.open('GET', url_api, true); - xhttp.onreadystatechange = (event => { + xhttp.open("GET", url_api, true); + xhttp.onreadystatechange = (event) => { if (xhttp.readyState === 4) { if (xhttp.status == 200) { resolve(JSON.parse(xhttp.responseText)); - } - else { - reject(new Error('Wooops! ' + url_api)); + } else { + reject(new Error("Wooops! " + url_api)); } } - }); + }; xhttp.send(); - }) + }); }; const fetchD1 = async (url_api) => { try { - const response = await fetchData(url_api) - const data = await fetchData(`${API}${response.results[0].id}`) - const origin = await fetchData(data.origin.url) - console.log('Primer Llamado...') + const response = await fetchData(url_api); + const data = await fetchData(`${API}${response.results[0].id}`); + const origin = await fetchData(data.origin.url); + console.log("Primer Llamado..."); console.log(`Personajes: ${response.info.count}`); - console.log('Segundo Llamado...') + console.log("Segundo Llamado..."); console.log(`Primer Personaje: ${data.name}`); - console.log('Tercero Llamado...') + console.log("Tercero Llamado..."); console.log(`Dimensión: ${origin.dimension}`); } catch (error) { - console.error(error) + console.error(error); } +}; -} - -fetchD1(API) +fetchD1(API); //const fetchD2 = async (url_api) => { // try { @@ -112,4 +110,4 @@ fetchD1(API) // console.log(`Dimensión: ${data3.dimension}`); // }); // }); -//}); \ No newline at end of file +//});