рд╢реБрдн рджрд┐рди, рджреЛрд╕реНрддреЛрдВ!рд╡реЗрдм рдПрдкреНрд▓рд┐рдХреЗрд╢рди рд╡рд┐рдХрд╕рд┐рдд рдХрд░рддреЗ рд╕рдордп, рд╕рд░реНрд╡рд░ рд╕реЗ рдбреЗрдЯрд╛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдирд╛ рдЕрдХреНрд╕рд░ рдЖрд╡рд╢реНрдпрдХ рд╣реЛрддрд╛ рд╣реИредрдЖрдЬ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдореЗрдВ рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рдХрдИ рддрд░реАрдХреЗ рд╣реИрдВредрдЖрдЗрдП рджреЗрдЦреЗрдВ рдХрд┐ XMLHttpRequest, Fetch, рдФрд░ Axios рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИредрдХрд╛рд░реНрдп JSONPlaceholder - рдкрд░реАрдХреНрд╖рдг рдФрд░ рдкреНрд░реЛрдЯреЛрдЯрд╛рдЗрдк (рджреВрд╕рд░реЗ рд╢рдмреНрджреЛрдВ рдореЗрдВ, рдПрдХ рдкреНрд░рд╢рд┐рдХреНрд╖рдг рдбреЗрдЯрд╛рдмреЗрд╕) рдХреЗ рд▓рд┐рдП рдПрдХ рдлрд░реНрдЬреА рдСрдирд▓рд╛рдЗрди рд░реАрд╕реНрдЯ рдПрдкреАрдЖрдИ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдЧрд╛ редXMLHttpRequest
рдХрд╛рд░реНрдп: рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреА рдПрдХ рд╕реВрдЪреА рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдВ рдФрд░ рдЗрд╕ рд╕реВрдЪреА рдХреЛ рдХрдВрд╕реЛрд▓ рдореЗрдВ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░реЗрдВредрдлреЗрд╕рд▓рд╛:
let xhr = new XMLHttpRequest()
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users')
xhr.send()
xhr.onload = () => xhr.status != 200 ? console.error(xhr.status) : console.table(JSON.parse(xhr.response))
xhr.onprogress = event => {
if (event.lengthComputable) {
console.dir(`received ${event.loaded} of ${event.total} bytes`)
} else {
console.dir(`received ${event.loaded} bytes`)
}
}
xhr.onerror = () => console.error('error')
рдкрд░рд┐рдгрд╛рдо: GitHub
рдкрд░ рдХреЛрдб редрд▓рд╛рдирд╛
рдХрд╛рд░реНрдп: рд╕рдорд╛рдиредрд╕рдорд╛рдзрд╛рди (XMLHttpRequest рдХреЗ рд╕рд╛рде рддреБрд▓рдирд╛ рдХрд░реЗрдВ):fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(json => console.table(json))
.catch(error => console.error(error))
рдкрд░рд┐рдгрд╛рдо: GitHub
рдкрд░ рдХреЛрдб ред рдпрд╛ рдЕрдЧрд░ рдЖрдкрдХреЛ async рдкрд╕рдВрдж рд╣реИ / рдФрд░ рдЕрдзрд┐рдХ рдкреНрд░рддреАрдХреНрд╖рд╛ рдХрд░реЗрдВ:(async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users')
const data = await response.json()
console.table(data)
} catch (error) {
console.error(error)
} finally {
console.log('done')
}
})()
рдкрд░рд┐рдгрд╛рдо: GitHub
рдкрд░ рдХреЛрдб ред рдЪрд▓реЛ рдХрд╛рд░реНрдп рдХреЛ рдереЛрдбрд╝рд╛ рдЬрдЯрд┐рд▓ рдХрд░рддреЗ рд╣реИрдВ: рдЕрдм рдЖрдкрдХреЛ рд╕рд░реНрд╡рд░ рд╕реЗ рдЪрд┐рддреНрд░ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдФрд░ рдЙрдирд╕реЗ рдПрдХ рдЧреИрд▓рд░реА рдмрдирд╛рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдлреЗрд╕рд▓рд╛:const url = 'https://jsonplaceholder.typicode.com/photos/'
getPhotosAndMakeGallery(url)
function getPhotosAndMakeGallery(url) {
for (let i = 1; i < 11; i++) {
fetch(url + i)
.then(response => response.json())
.then(photo => {
let img = document.createElement('img')
img.src = photo.url
document.body.append(img)
})
}
}
рдкрд░рд┐рдгрд╛рдо: GitHub
рдкрд░ рдХреЛрдб редAxios
рдЗрд╕ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЛ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреЗ рдкреНрд░рдореБрдЦ рдореЗрдВ <script src = " unpkg.com/axios/dist/axios.min.js "> </ script> рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛ редрдХрд╛рд░реНрдп: рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреА рд╕реВрдЪреА рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдВ рдФрд░ рдЗрд╕реЗ рдХрдВрд╕реЛрд▓ рдореЗрдВ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░реЗрдВредрдлреЗрд╕рд▓рд╛:axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => console.table(response.data))
.catch(error => console.log(error))
рдЧрд┐рдЯрд╣рдм
рдХреЛрдб редрдпрд╛ рдпрджрд┐ рдЖрдк async / рдкреНрд░рддреАрдХреНрд╖рд╛ рдкрд╕рдВрдж рдХрд░рддреЗ рд╣реИрдВ:(async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
console.table(response.data);
} catch (error) {
console.error(error);
}
})()
рдЧрд┐рдЯрд╣рдм
рдХреЛрдб редрд╣рдо рдХрд╛рд░реНрдп рдХреЛ рдЬрдЯрд┐рд▓ рдХрд░рддреЗ рд╣реИрдВ: рдЯреЙрдбреЛрд╕ рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдВ рдФрд░ рдПрдХ рд╕реВрдЪреА рдмрдирд╛рдПрдВредрдлреЗрд╕рд▓рд╛:const url = 'https://jsonplaceholder.typicode.com/todos/'
getTodosAndMakeList()
function getTodosAndMakeList() {
const ul = document.createElement('ul')
document.body.append(ul)
for (let i = 1; i < 21; i++) {
axios.get(url + i)
.then(response => {
let li = document.createElement('li')
li.textContent = `title: ${response.data.title}; completed: ${response.data.completed}`
ul.append(li)
})
.catch(error => console.log(error))
}
}
рдкрд░рд┐рдгрд╛рдо: GitHub
рдкрд░ рдХреЛрдб ред рд╣рдо рдЗрд╕реЗ рдЬрдЯрд┐рд▓ рдХрд░рддреЗ рд╣реИрдВ: рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ, рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдФрд░ рдлрд╝реЛрдЯреЛ рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдВ, рдЗрди рдбреЗрдЯрд╛ рдХреЛ рдорд┐рд▓рд╛рдПрдВ рдФрд░ рд╕рдм рдХреБрдЫ рдПрдХ рдкрдардиреАрдп рд░реВрдк рдореЗрдВ рдкреНрд░рд╕реНрддреБрдд рдХрд░реЗрдВред рдлреЗрд╕рд▓рд╛:function getUsers(i) {
return axios.get('https://jsonplaceholder.typicode.com/users/' + i)
}
function getComments(i) {
return axios.get('https://jsonplaceholder.typicode.com/comments/' + i)
}
function getPhotos(i) {
return axios.get('https://jsonplaceholder.typicode.com/photos/' + i)
}
(async() => {
for (let i = 1; i < 7; i++) {
let request = await axios.all([getUsers(i), getComments(i), getPhotos(i)])
.then(axios.spread(function(user, comment, photo) {
let figure = document.createElement('figure')
document.body.append(figure)
let figcaption = document.createElement('figcaption')
figcaption.textContent = `Post ${i}`
figure.append(figcaption)
let img = document.createElement('img')
img.src = photo.data.url
figure.append(img)
let userName = document.createElement('p')
userName.innerHTML = `<span>Name:</span> ${user.data.username}`
figure.append(userName)
let userComment = document.createElement('p')
userComment.innerHTML = `<span>Comment:</span> ${comment.data.body}`
figure.append(userComment)
}))
}
})()
рдкрд░рд┐рдгрд╛рдо: GitHub
рдкрд░ рдХреЛрдб ред рдзреНрдпрд╛рди рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред