Get best of the week

Beberapa contoh mengirim permintaan ke server

Selamat siang teman!

Saat mengembangkan aplikasi web, seringkali perlu untuk mendapatkan data dari server.

Ada banyak cara untuk melakukan ini dalam JavaScript hari ini.

Mari kita lihat bagaimana XMLHttpRequest, Fetch, dan Axios digunakan dalam praktik.

Tugas akan menggunakan JSONPlaceholder - API REST online palsu untuk pengujian dan pembuatan prototipe (dengan kata lain, basis data pelatihan).

XMLHttpRequest


Tugas: dapatkan daftar pengguna dan tampilkan daftar ini di konsol.

Keputusan:

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

Hasil:



Kode pada GitHub .

Mengambil


Tugas: serupa.

Solusi (bandingkan dengan XMLHttpRequest):

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

Hasil:



Kode pada GitHub .

Atau jika Anda suka async / tunggu lebih banyak:

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

Hasil:



Kode pada GitHub .

Mari kita sedikit mempersulit tugas: sekarang Anda perlu mendapatkan gambar dari server dan membentuk galeri dari mereka.

Keputusan:

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

Hasil:



Kode pada GitHub .

Aksioma


Untuk menghubungkan perpustakaan ini, Anda perlu menambahkan <script src = " unpkg.com/axios/dist/axios.min.js "> </script> di kepala dokumen.

Tugas: dapatkan daftar pengguna dan tampilkan di konsol.

Keputusan:

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

Kode GitHub .

Atau jika Anda lebih suka async / tunggu:

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

Kode GitHub .

Kami menyulitkan tugas: dapatkan todos dan membuat daftar.

Keputusan:

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

Hasil:



Kode pada GitHub .

Kami menyulitkannya: dapatkan pengguna, komentar, dan foto, kombinasikan data ini dan sajikan semuanya dalam bentuk yang dapat dibaca.

Keputusan:

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

Hasil:



Kode pada GitHub .

Terima kasih atas perhatian Anda.

More articles:


All Articles