|
|
@@ -0,0 +1,122 @@
|
|
|
+//fetch basic
|
|
|
+{
|
|
|
+ function jsonTable (dom,json){
|
|
|
+ let table = document.createElement('table')
|
|
|
+ table.border = "1"
|
|
|
+ dom.append(table)
|
|
|
+ for(let el in json){
|
|
|
+ let tr = document.createElement('tr')
|
|
|
+ let td1 = document.createElement('td')
|
|
|
+ let td2 = document.createElement('td')
|
|
|
+ td1.innerText= el
|
|
|
+ td2.innerText= json[el]
|
|
|
+ table.append(tr)
|
|
|
+ tr.append(td1,td2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ fetch('https://swapi.dev/api/starships/12/')
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(luke =>jsonTable(document.body,luke))
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//fetch improved
|
|
|
+{
|
|
|
+ function jsonTable (dom,json){
|
|
|
+ let table = document.createElement('table')
|
|
|
+ table.border = "1"
|
|
|
+ dom.append(table)
|
|
|
+ for(let el in json){
|
|
|
+ let tr = document.createElement('tr')
|
|
|
+ let td1 = document.createElement('td')
|
|
|
+ let td2 = document.createElement('td')
|
|
|
+
|
|
|
+ td1.innerText= el
|
|
|
+ td2.innerText= json[el]
|
|
|
+ table.append(tr)
|
|
|
+ tr.append(td1,td2)
|
|
|
+ function btn (link){
|
|
|
+ let button = document.createElement('button')
|
|
|
+ button.innerText='info'
|
|
|
+ button.onclick= function(){
|
|
|
+ fetch(link)
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(luke =>jsonTable(document.body,luke))
|
|
|
+ }
|
|
|
+ td2.append(button)
|
|
|
+ }
|
|
|
+
|
|
|
+ if(Array.isArray(json[el])){
|
|
|
+ for(let elArr of json[el]){
|
|
|
+ if(elArr.indexOf("https://swapi.dev")!== -1){
|
|
|
+ btn(elArr)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(json[el].indexOf("https://swapi.dev")!== -1){
|
|
|
+ btn(json[el])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ fetch('https://swapi.dev/api/starships/12/')
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(luke =>jsonTable(document.body,luke))
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//race
|
|
|
+{
|
|
|
+ function delay(ms){
|
|
|
+ function executor(fulfill, reject){
|
|
|
+ setTimeout(() => fulfill(ms), ms)
|
|
|
+ }
|
|
|
+ return new Promise(executor)
|
|
|
+ }
|
|
|
+
|
|
|
+ let promise1 = fetch("https://swapi.dev/api/films/1/")
|
|
|
+ .then(() => console.log(`promise ${Date.now()-startTimer} ms`))
|
|
|
+ let promise2 = delay(400)
|
|
|
+ .then(() => console.log("delay"))
|
|
|
+ let startTimer = Date.now()
|
|
|
+ Promise.race([promise1, promise2])
|
|
|
+ .then(result => result)
|
|
|
+}
|
|
|
+
|
|
|
+//Promisify: confirm
|
|
|
+{
|
|
|
+ function confirmPromise(text){
|
|
|
+ function executor(fulfill, reject) {
|
|
|
+ if (confirm(text)){
|
|
|
+ fulfill()
|
|
|
+ }
|
|
|
+ else{reject()}
|
|
|
+ }
|
|
|
+ return new Promise(executor)
|
|
|
+ }
|
|
|
+
|
|
|
+ confirmPromise('Промисы это сложно?').then(() => console.log('не так уже и сложно'),
|
|
|
+ () => console.log('respect за усидчивость и внимательность'))
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//Promisify: prompt
|
|
|
+{
|
|
|
+ function promptPromise(text){
|
|
|
+ function executor(fulfill, reject) {
|
|
|
+ let name = prompt(text)
|
|
|
+ if (name){
|
|
|
+ fulfill(name)
|
|
|
+ }
|
|
|
+ else{reject()}
|
|
|
+ }
|
|
|
+ return new Promise(executor)
|
|
|
+ }
|
|
|
+ promptPromise("Как тебя зовут?").then(name => console.log(`Тебя зовут ${name}`),
|
|
|
+ () => console.log('Ну зачем морозиться, нормально же общались'))
|
|
|
+}
|
|
|
+
|
