123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- //fetch basic
- /*
- {
- function jsonInTable (parent, data){
- let table = document.createElement('table')
- table.border = "1px"
- for(key in data){
- let tr = document.createElement('tr')
- table.append(tr)
-
- let td = document.createElement('td')
- tr.append(td)
- td.innerText = [key]
- let td2 = document.createElement('td')
- tr.append(td2)
- td2.innerText = data[key]
- }
- parent.append(table)
-
- }
- fetch('https://swapi.dev/api/people/1/')
- .then(res => res.json())
- .then( data => jsonInTable(content, data))
- }
- //fetch improved
- {
- {
- function jsonInTable (parent, data){
- let table = document.createElement('table')
- table.border = "1px"
-
- for(let key in data){
- let tr = document.createElement('tr')
- table.append(tr)
-
- let td = document.createElement('td')
- tr.append(td)
- td.innerText = [key]
-
- let td2 = document.createElement('td')
- tr.append(td2)
- td2.innerText = data[key]
-
- function buton(url) {
- let button = document.createElement('button')
- button.innerText = 'text'
- button.onclick = () => {
- fetch(url)
- .then(res=>res.json())
- .then(info => jsonInTable(content, info))
-
- }
- td2.append(button)
- }
- if(Array.isArray(data[key])){
- for(elemOfArr of data[key]){
- if(elemOfArr.startsWith("https://swapi.dev") ){
-
-
- buton(elemOfArr)
- }
- }
- }
-
- if(typeof(data[key]) === "string" && data[key].indexOf("https://swapi.dev") !== -1 ){
- buton(data[key])
- }
-
-
- }
- parent.append(table)
-
- }
- fetch('https://swapi.dev/api/people/1/')
- .then(res => res.json())
- .then( data => jsonInTable(content, data))
- }
- }
- // Promise.race
- {
- function delay(ms){ //промисифицированная функция для создания промиса, который резолвится через определенное время
- //функция-исполнитель, принимает два параметра - функции для передачи промису результата работы
- function executor(fulfill,reject){ //reject объявлен для вида.
- setTimeout(() => fulfill(ms), ms) //setTimeout запустит функцию, которая запустит fulfill через ms миллисекунд. Результатом промиса будет время задержки
- }
-
- //возврщаем новый промис, передав в него executor. Промис тут же его запускает, передав в него колбэки для управления состоянием
- return new Promise(executor)
- }
- const p1 = delay(Math.random()*1000).then(result => "DelayFetch")
- const p2 = fetch('https://swapi.dev/api/people/1/')
- .then(result => 'Myfetch')
- let date = new Date()
- Promise.race([p1,p2]).then(value => console.log(value , new Date() - date))
- }
- //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 answer = prompt(text)
- if(answer){
- fulfill(answer)
- }
- else {
- reject()
- }
- }
- return new Promise(executor)
- }
- promptPromise("Как тебя зовут?").then(name => console.log(`Тебя зовут ${name}`),
- () => console.log('Ну зачем морозиться, нормально же общались'))
- }
|