0

Делаю GET запрос на страницу для загрузки контента, запрос с помощью axios
файл app.js:

const axios = require("axios");

document.addEventListener("DOMContentLoaded", function() {
    axios.get("/get-cards")
        .then(response => {
            $("#content").html(response.data)
        })
        .catch(error => {
            console.log(`ERROR: ${error}`)
        });
});

страница где находится #content:

<div id="content">
    <!-- сюда загружается контент -->
</div>

страница на которую отправляется запрос (по адресу "/get-cards)":

@foreach($technics as $technic)
    <div class="technic-card">
        <div class="card-img-slider">
            <img src="{{ $technic->img_1 }}" alt="{{ $technic->name }}">
            <img src="{{ $technic->img_2 }}" alt="{{ $technic->name }}">
            <img src="{{ $technic->img_3 }}" alt="{{ $technic->name }}">
        </div>
        <div class="card-name">{{ $technic->name }}</div>
        <div class="card-type">{{ $technic->type }}</div>
        <div class="card-footer">
            <div class="card-price">{{ $technic->price }}/час</div>
            <div class="card-buy-btn">арендовать</div>
        </div>
    </div>
@endforeach

И когда только загружается страница где находится #content страница грузится 1-2 секунды, как сделать чтобы вместо загрузки окна был индикатор загрузки в #content(div блок с анимацией загрузки) до тех пор пока не выполнится запрос?

1 ответ 1

1

можно просто изначально поместить его в код страницы

<div id="content">
    <div class="my-spinner">...</div>
</div>

он будет отобржаться сразу после загрузки и будет заменён на контент, когда придёт ответ с сервера

3
  • хорошая идея. но я думал будет что то вроде метода для отслеживания "пока выполняется" 9 окт 2020 в 10:22
  • в целом, необходиости в таком методе нет. достаточно принять, что запрос выпоняется между вызовом axios.get() и получением ответа в then или catch. соответсвенно, в общем виде логику запроса с отслеживанием состояния можно описать так: ` funciton request(url) { onRequestStarted(); // наша функция, в которой происходят действия перед началом запроса, например заменяем контент на индикатор загрузки axios.get(url) .then(response => {onRequestFinish(response)}) .catch(error => ...); }` 9 окт 2020 в 11:39
  • а как сделать чтобы на вкладке браузера не было загрузки. т.е. чтобы индикатор загрузки был только на станице? 9 окт 2020 в 12:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.