使用允诺的顺序呈现

Question

我有一个观点，我想按日期顺序提出10个项目。这个数据(10个项)是从API中获取的，并且已经按日期进行了排序。快速抽样：

{
  "meta": { ... },
  "data": [
    {
      "id": 4891,
      "date": "February 23rd, 2021",
      "photo": "",
    },
    {
      "id": 3126,
      "date": "February 22nd, 2021",
      "photo": "",
    },
    {
      "id": 7895,
      "date": "February 21st, 2021",
      "photo": "123-sesame-st-bd088111.jpg",
    }
  ]
}

我已经包括了一张照片，以帮助可视化。在一些场景中，比如带小猫的卡片，我已经从最初的数据加载中知道了照片资产。如果我没有已知的照片资产，比如带房屋的卡片，我会从一个辅助API调用中获取这些图像资产。

​

​

我试图依靠承诺，以维持秩序时，把这些项目的视图。注意每张卡片底部的日期，从左到右阅读，这是无效的。如何维护每个项的呈现顺序，就像从初始数据加载返回的顺序一样？

下面是我当前的代码，为了更好地关注核心逻辑，删除了一些内容：

ready(() => {

    const cards = document.getElementById("cards")

    function fetchPhoto(id) {
        return fetch(`https://api.com/photo/${id}`)
            .then((res) => { return res.json() })
            .then((res) => {
                return res.photo
            })
    }

    function renderCard(item, photo) {
        let postCard = document.createElement('div')
        postCard.innerHTML = `<div>...${photo}...</div>`
        return postCard
    }

    function createCard(item) {
        if (item.photo) {
            return new Promise((resolve, reject) => {
                resolve(renderCard(item, item.photo))
            });
        }
        return fetchPhoto(item.id).then(photo => {
            return renderCard(item, photo)
        });
    }

    function loadRecent() {
        fetch('https://api.com/items?limit=10')
            .then((res) => { return res.json() })
            .then((res) => {
                res.data.forEach(item => {
                    createCard(item).then(card => {
                        cards.appendChild(card)
                    })
                })
            })
    }

    loadRecent()

}

Answer 1

我选择接受托马斯的建议，先呈现卡片，然后加载图像。

ready(() => {

    const cards = document.getElementById("cards")

    function fetchPhoto(id) {
        fetch(`https://api.com/photo/${id}`)
            .then((res) => { return res.json() })
            .then((res) => {
                document.getElementById(`photo-${id}`).src = res.photo
            })
    }

    function renderCard(item, photo) {
        let postCard = document.createElement('div')
        postCard.innerHTML = `<div>...<img id="photo-${item.id}" src="${photo}"></img>...</div>`
        cards.appendChild(postCard)
        return true
    }

    function createCard(item) {
        let photo = 'https://via.placeholder.com/150x120';
        if (item.photo !== '') {
            photo = item.photo
        }
        return new Promise((resolve, reject) => {
            resolve(renderCard(item, photo))
        });
    }

    function loadRecent() {
        fetch('https://api.com/items?limit=10')
            .then((res) => { return res.json() })
            .then((res) => {
                res.data.forEach(item => {
                    createCard(item).then(() => {
                        if (item.photo == '') {
                            fetchPhoto(item.id)
                        }
                    })
                })
            })
    }

    loadRecent()

}