21 March

Парочка примеров отправки запроса на сервер

Website developmentJavaScriptProgramming
Tutorial
Доброго времени суток, друзья!

При разработке веб-приложений часто возникает необходимость получения данных с сервера.

На сегодняшний день в JavaScript существует большое количество способов это сделать.

Давайте посмотрим, как XMLHttpRequest, Fetch и Axios используются на практике.

В задачах будет использоваться JSONPlaceholder — фейковый онлайн REST API для тестирования и прототипирования (проще говоря, учебная база данных).

XMLHttpRequest


Задача: получить список пользователей и вывести этот список в консоль.

Решение:

// создаем объект 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')

Результат:



Код на GitHub.

Fetch


Задача: аналогичная.

Решение (сравните с XMLHttpRequest):

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

Результат:



Код на GitHub.

Либо, если вам больше нравится async/await:

(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> в head документа.

Задача: получить список пользователей и вывести его в консоль.

Решение:

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

Код на GitHub.

Либо, если вы предпочитаете async/await:

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

Код на GitHub.

Усложняем задачу: получить todos и сформировать список.

Решение:

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.

Благодарю за внимание.
Tags:javascriptпрограммированиеразработкаxmlhttprequestfetchaxiosзапроссервер
Hubs: Website development JavaScript Programming
+2
5.3k 97
Comments 9
Ads