API выборки JavaScript

Узнайте, как использовать метод fetch для извлечения данных из API и отображения их с помощью таблицы HTML.

Начнем!🙂

Интерфейс Fetch API позволяет веб-браузерам отправлять HTTP-запросы на веб-серверы.

Метод fetch() всегда возвращает обещание. Обещание, которое может быть разрешено или отклонено.

Я использую асинхронный режим и жду.

async и await упрощают написание промисов. Ключевые слова async и await позволяют писать асинхронное поведение на основе обещаний в более чистом стиле.

Вот фиктивный API.

'https://dummyjson.com/products'

Итак, давайте напишем для него функцию.

async function displayData(api) {
    let apiDataResponse = await fetch(api);
    let data = await apiDataResponse.json();
     console.log(data.products[0])
  
}

displayData('https://dummyjson.com/products');

Я создал асинхронную функциюdisplayData.. Ключевое слово async используется до того, как функция возвращает обещание.

Затем я создал переменную с именем apiDataResponse,Ключевое слово await заставляет JavaScript ждать, пока обещание не установится и не вернет результат.

fetch() принимает 2 аргумента:

Строка URL или объект запроса.
Необязательный аргумент, который включает информацию о запросе, который вы хотите сделать к базе данных или API.

Асинхронная функция приостанавливается до завершения ответа. Когда ответ завершен, переменной apiDataResponse присваивается объект ответа запроса.

Теперь объект apiDataResponse содержит несколько форматов данных.

apiDataResponse.json() — это метод, который позволяет извлекать объект JSON из ответа. Метод возвращает обещание, поэтому вам нужно дождаться JSON. await apiDataResponse.json();

Теперь переменная data содержит массив продуктов.

Вы можете легко проверить это с помощью консоли.

Итак, логическая часть выполнена. Нам просто нужно немного изменить асинхронную функцию для отображения данных.

async function displayData(api) {

    let tbody = document.getElementById('myTable');
    let rows = '';
    let apiDataResponse = await fetch(api);
    let data = await apiDataResponse.json();

    //console.log(data.products[0])
    let prod = data.products;
    for (let i = 0; i < prod.length; i++) {
        rows += `<tr><td><img src="${prod[i].thumbnail}" width="200px" height="150px" alt="img"/></td>
        <td>${prod[i].title}</td>
        <td>${prod[i].brand}</td>
        <td>${prod[i].category}</td>
        <td>${prod[i].description}</td>
        <td>${prod[i].price}</td></tr>`

    }
    tbody.innerHTML = rows;

}


displayData('https://dummyjson.com/products');

HTML-часть:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container mt-3">
        <h2>Products Table</h2>

        <br>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Thumbnail</th>
                    <th>Product Title</th>
                    <th>Brand</th>
                    <th>Description</th>
                    <th>Category</th>
                    <th>Price</th>

                </tr>
            </thead>
            <tbody id="myTable">

            </tbody>
        </table>

    </div>
</body>
<script type="text/javascript" src="JS/myScript.js">
</script>

</html>

Вот окончательный результат.

Поздравляю! Вы дошли до конца этого поста. Надеюсь, вы хорошо понимаете концепцию.

Следите за новостями!

Далее я создам функцию поиска для таблицы этого продукта.

Увидимся в следующем посте, а пока продолжайте учиться и продолжать исследовать!

API выборки JavaScript

Похожие вопросы