Get best of the week

Einige Beispiele zum Senden einer Anfrage an den Server

Guten Tag, Freunde!

Bei der Entwicklung von Webanwendungen ist es häufig erforderlich, Daten vom Server abzurufen.

In JavaScript gibt es heute viele Möglichkeiten, dies zu tun.

Mal sehen, wie XMLHttpRequest, Fetch und Axios in der Praxis verwendet werden.

Die Aufgaben verwenden den JSONPlaceholder - eine gefälschte Online-REST-API zum Testen und Prototyping ( dh eine Trainingsdatenbank).

XMLHttpRequest


Aufgabe: Holen Sie sich eine Liste der Benutzer und zeigen Sie diese Liste in der Konsole an.

Entscheidung:

//   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')

Ergebnis:



Code auf GitHub .

Holen


Aufgabe: ähnlich.

Lösung (vergleiche mit XMLHttpRequest):

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

Ergebnis:



Code auf GitHub .

Oder wenn Sie asynchron mögen / mehr erwarten:

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

Ergebnis:



Code auf GitHub .

Lassen Sie uns die Aufgabe etwas komplizieren: Jetzt müssen Sie Bilder vom Server abrufen und daraus eine Galerie erstellen.

Entscheidung:

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

Ergebnis:



Code auf GitHub .

Axios


Um diese Bibliothek zu verbinden, müssen Sie <script src = " unpkg.com/axios/dist/axios.min.js "> </ script> im Kopf des Dokuments hinzufügen .

Aufgabe: Holen Sie sich die Liste der Benutzer und zeigen Sie sie in der Konsole an.

Entscheidung:

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

GitHub- Code .

Oder wenn Sie Async bevorzugen / warten:

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

GitHub- Code .

Wir erschweren die Aufgabe: Aufgaben erledigen und eine Liste erstellen.

Entscheidung:

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

Ergebnis:



Code auf GitHub .

Wir erschweren es: Holen Sie sich Benutzer, Kommentare und Fotos, kombinieren Sie diese Daten und präsentieren Sie alles in lesbarer Form.

Entscheidung:

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

Ergebnis:



Code auf GitHub .

Vielen Dank für Ihre Aufmerksamkeit.

More articles:


All Articles