Get best of the week

Quelques exemples d'envoi d'une demande au serveur

Bonjour mes amis!

Lors du développement d'applications Web, il est souvent nécessaire d'obtenir des données du serveur.

Il existe de nombreuses façons de le faire en JavaScript aujourd'hui.

Voyons comment XMLHttpRequest, Fetch et Axios sont utilisés dans la pratique.

Les tâches utiliseront le JSONPlaceholder - une fausse API REST en ligne pour les tests et le prototypage (en d'autres termes, une base de données de formation).

XMLHttpRequest


Tâche: obtenir une liste d'utilisateurs et afficher cette liste dans la console.

Décision:

//   XMLHttpRequest   
let xhr = new XMLHttpRequest()

//  
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users')

//  
xhr.send()

/*xhr.onload = function() {
    if (xhr.status != 200) {
        console.log(`error ${xhr.status}:${xhr.statusText}`)
    } else {
        console.table(JSON.parse(xhr.response))
    }
}*/

//  
//   ,    
//  ,       
xhr.onload = () => xhr.status != 200 ? console.error(xhr.status) : console.table(JSON.parse(xhr.response))

//   
//     Content-Length,     
//   ,     
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')

Résultat:



Code sur GitHub .

Récupérer


Tâche: similaire.

Solution (comparer avec XMLHttpRequest):

fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(json => console.table(json))
    .catch(error => console.error(error))

Résultat:



Code sur GitHub .

Ou si vous aimez async / attendez plus:

(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')
    }
})()

Résultat:



Code sur GitHub .

Compliquons un peu la tâche: vous devez maintenant obtenir des images du serveur et en faire une galerie.

Décision:

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)
            })
    }
}

Résultat:



Code sur GitHub .

Axios


Pour connecter cette bibliothèque, vous devez ajouter <script src = " unpkg.com/axios/dist/axios.min.js "> </script> en tête du document.

Tâche: récupérer la liste des utilisateurs et l'afficher dans la console.

Décision:

axios.get('https://jsonplaceholder.typicode.com/users')
    .then(response => console.table(response.data))
    .catch(error => console.log(error))

Code GitHub .

Ou si vous préférez async / attendre:

(async () => {
    try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        console.table(response.data);
    } catch (error) {
        console.error(error);
    }
})()

Code GitHub .

Nous compliquons la tâche: obtenir des todos et créer une liste.

Décision:

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))
    }
}

Résultat:



Code sur GitHub .

Nous le compliquons: obtenir des utilisateurs, des commentaires et des photos, combiner ces données et tout présenter sous une forme lisible.

Décision:

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)
            }))
    }
})()

Résultat:



Code sur GitHub .

Merci de votre attention.

More articles:


All Articles