如何在从 API 获取数据时添加加载动画？香草js答案

【问题标题】：How to add a loading animation while Fetch data from API? Vanilla js如何在从 API 获取数据时添加加载动画？香草js
【发布时间】：2020-06-12 22:47:55
【问题描述】：

我在这里尝试了很多答案，但我找到的所有答案，人们都在使用 jquery、ajax、react 或类似的东西。我想要一个纯 javascript (vanilla js) 的答案。

const movieApiMovies = () => {
fetch(movieApi_url + "movies/")
    .then(response => response.json())
    .then(function (data) {
        let result = `<h2> Movies I've watched! </h2>`;
        data.forEach((movie) => {
            const {id, name, year, note_imdb, genre, duration} = movie;
            result +=
                `<div>
                    <h5> Movie ID: ${id} </h5>
                    <ul>
                        <li>Movie name: ${name}</li>
                        <li>Movie year: ${year}</li>
                        <li>Movie note on IMDB: ${note_imdb}</li>
                        <li>Movie Genre: ${genre}</li>
                        <li>Movie duration: ${duration}</li>
                    </ul>
                </div>`;
            document.getElementById('movieResult').innerHTML = result;
        })
    })
};

我有一个动画，它在这个 Div 元素上。

<div class="boxLoading"></div>

我有一个可以调用所有内容的按钮。

<div id="button1">
      <button class="button" id="moviesfromapi"onclick="movieApiMovies ()">Display</button>
</div>

【问题讨论】：

“我尝试了很多” - 您发布的代码显示除了获取数据并显示它之外，零尝试做任何事情。提示：调用fetch前开始动画，更新后结束动画movieResult - 简单
我在 fetch 方法中尝试执行它时遇到了 promise 错误，这就是我没有发布它的原因。感谢您的提示。

标签： javascript css api promise loading

【解决方案1】：

调用前添加加载器，收到结果后删除，如下

const movieApiMovies = () => {
let loader = `<div class="boxLoading"></div>`;
document.getElementById('movieResult').innerHTML = loader;
fetch(movieApi_url + "movies/")
    .then(response => response.json())
    .then(function (data) {
        let result = `<h2> Movies I've watched! </h2>`;
        data.forEach((movie) => {
            const {id, name, year, note_imdb, genre, duration} = movie;
            result +=
                `<div>
                    <h5> Movie ID: ${id} </h5>
                    <ul>
                        <li>Movie name: ${name}</li>
                        <li>Movie year: ${year}</li>
                        <li>Movie note on IMDB: ${note_imdb}</li>
                        <li>Movie Genre: ${genre}</li>
                        <li>Movie duration: ${duration}</li>
                    </ul>
                </div>`;
            document.getElementById('movieResult').innerHTML = result;
        })
    })
};

【讨论】：

谢谢！！我试图在 fetch 中执行此操作，但遇到了 promise 错误。