在map函数（或for循环）内执行fetch调用

Question

我正在尝试迭代对象数组，并且根据其中一些对象的内容，我需要执行获取函数，在更新新数组之前等待结果。

这是我的js：

const allPosts = [
{
    "type": "image",
    "is_blocks_post_format": true,
    "blog_name": "jessicaharbydotcom",
    "id": 744489834793566200,
    "id_string": "744489834793566208",
    "is_blazed": false,
    "is_blaze_pending": false,
    "can_blaze": false,
    "post_url": "https://jessicaharbydotcom.tumblr.com/post/744489834793566208/shield-2018-wax-display-case-light-shield-is-a",
    "slug": "shield-2018-wax-display-case-light-shield-is-a",
    "date": "2024-03-09 16:13:54 GMT",
    "timestamp": 1710000834,
    "state": "published",
    "format": "html",
    "reblog_key": "4O3x5WWb",
    "tags": [
        "shield"
    ],
    "note_count": 0,
    "title": "",
    "body": "<div class=\"npf_row\"><figure class=\"tmblr-full\" data-orig-height=\"4032\" data-orig-width=\"2640\"><img src=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg\" data-orig-height=\"4032\" data-orig-width=\"2640\" srcset=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s75x75_c1/eb876d72933b6138eeba73ca59499c3809975b61.jpg 75w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s100x200/21f86af6b60e44ba7d90090281dc1a1461494805.jpg 100w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s250x400/eba73e6b36bf95f9473e9276592794923583d9de.jpg 250w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s400x600/f202a41604edd3e6cfeee2f9457620bbc87accff.jpg 393w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s500x750/3def886512d22590bb2b72396d147cb8007ccd46.jpg 491w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s540x810/d83eb22083d9dafb4feae95e2f4a2ca0553e0ae8.jpg 530w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg 629w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s1280x1920/1c03d83fdad14df8334745de77595cd9d2215ce7.jpg 1257w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s2048x3072/ee6e6bf1448c6304fbf6cbed93062b9ca520baf3.jpg 2011w\" sizes=\"(max-width: 1280px) 100vw, 1280px\"/></figure></div><p>Shield<br/>2018<br/>Wax, display case, light</p><p>Shield is a meditation on masculinity and power. The tiles are wax casts of the substantial belt buckle once belonging to the artist&rsquo;s grandfather, who was a Chicago Police Sergeant investigated in the 1970s as part of a ring of police shaking down motorists for payoffs. While eventually granted immunity from prosecution by the state, he was indicted, along with two fellow policemen, for perjury by a grand jury for lying about his involvement.</p>",
    "reblog": {
        "comment": "<p><div class=\"npf_row\"><figure class=\"tmblr-full\" data-orig-height=\"4032\" data-orig-width=\"2640\"><img src=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg\" data-orig-height=\"4032\" data-orig-width=\"2640\" srcset=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s75x75_c1/eb876d72933b6138eeba73ca59499c3809975b61.jpg 75w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s100x200/21f86af6b60e44ba7d90090281dc1a1461494805.jpg 100w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s250x400/eba73e6b36bf95f9473e9276592794923583d9de.jpg 250w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s400x600/f202a41604edd3e6cfeee2f9457620bbc87accff.jpg 393w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s500x750/3def886512d22590bb2b72396d147cb8007ccd46.jpg 491w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s540x810/d83eb22083d9dafb4feae95e2f4a2ca0553e0ae8.jpg 530w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg 629w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s1280x1920/1c03d83fdad14df8334745de77595cd9d2215ce7.jpg 1257w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s2048x3072/ee6e6bf1448c6304fbf6cbed93062b9ca520baf3.jpg 2011w\" sizes=\"(max-width: 1280px) 100vw, 1280px\"></figure></div><p>Shield<br>2018<br>Wax, display case, light</p><p>Shield is a meditation on masculinity and power. The tiles are wax casts of the substantial belt buckle once belonging to the artist’s grandfather, who was a Chicago Police Sergeant investigated in the 1970s as part of a ring of police shaking down motorists for payoffs. While eventually granted immunity from prosecution by the state, he was indicted, along with two fellow policemen, for perjury by a grand jury for lying about his involvement.</p></p>",
        "tree_html": ""
    },
    "can_reply": false,
    "display_avatar": true
},
    {
    "type": "video video-embed",
    "is_blocks_post_format": true,
    "blog_name": "jessicaharbydotcom",
    "id": 744485994035904500,
    "id_string": "744485994035904513",
    "is_blazed": false,
    "is_blaze_pending": false,
    "can_blaze": false,
    "post_url": "https://jessicaharbydotcom.tumblr.com/post/744485994035904513/referendum-ask-me-how-do-i-feel",
    "slug": "referendum-ask-me-how-do-i-feel",
    "date": "2024-03-09 15:12:51 GMT",
    "timestamp": 1709997171,
    "state": "published",
    "format": "html",
    "reblog_key": "qL2EmJnA",
    "tags": [
        "referendum"
    ],
    "short_url": "https://tmblr.co/ZXen9PfKyX4kmu01",
    "summary": "Referendum (Ask Me How Do I Feel)",
    "should_open_in_legacy": false,
    "recommended_source": null,
    "recommended_color": null,
    "note_count": 0,
    "title": "",
    "body": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/181950781\",\"display_url\":\"https://vimeo.com/181950781\",\"title\":\"Referendum (Ask Me How Do I Feel)\",\"description\":\"Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative. The film speaks d\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"ad17645e0781329536708048ee806163:9100d8a78851c197-1c\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/181950781\" target=\"_blank\">Referendum (Ask Me How Do I Feel)</a></p><p>Referendum (Ask Me How Do I Feel) <br/>2016<br/>Single channel video</p><p>Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative, speaking directly to the viewer as the men onscreen debate and decide important matters, failing to provide answers to the direct questions posed. </p>",
    "reblog": {
        "comment": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/181950781\",\"display_url\":\"https://vimeo.com/181950781\",\"title\":\"Referendum (Ask Me How Do I Feel)\",\"description\":\"Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative. The film speaks d\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"ad17645e0781329536708048ee806163:9100d8a78851c197-1c\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/181950781\" target=\"_blank\">Referendum (Ask Me How Do I Feel)</a></p><p>Referendum (Ask Me How Do I Feel) <br>2016<br>Single channel video</p><p>Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative, speaking directly to the viewer as the men onscreen debate and decide important matters, failing to provide answers to the direct questions posed. </p>",
        "tree_html": ""
    },
    "can_reply": false,
    "display_avatar": true
},
{
    "type": "video video-embed",
    "is_blocks_post_format": true,
    "blog_name": "jessicaharbydotcom",
    "id": 744393264438837200,
    "id_string": "744393264438837248",
    "is_blazed": false,
    "is_blaze_pending": false,
    "can_blaze": false,
    "post_url": "https://jessicaharbydotcom.tumblr.com/post/744393264438837248/affirmation-2016",
    "slug": "affirmation-2016",
    "date": "2024-03-08 14:38:57 GMT",
    "timestamp": 1709908737,
    "state": "published",
    "format": "html",
    "reblog_key": "jniGZGhJ",
    "tags": [
        "affirmation"
    ],
    "short_url": "https://tmblr.co/ZXen9PfKdRha4W00",
    "summary": "Affirmation (2016)",
    "should_open_in_legacy": false,
    "recommended_source": null,
    "recommended_color": null,
    "note_count": 0,
    "title": "",
    "body": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/153949952?share=copy\",\"display_url\":\"https://vimeo.com/153949952?share=copy\",\"title\":\"Affirmation (2016)\",\"description\":\"Affirmation (2016) uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton wa\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"cd78c9656df6b9381417c980464efff7:86fa2ab3c65a5863-70\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/153949952?share=copy\" target=\"_blank\">Affirmation (2016)</a></p><p>Affirmation <br/>2016<br/>Single channel video</p><p>Affirmation uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton was badly injured shooting this portion of the film and chose to keep the jarring moment of impact in the finished comedy.</p>",
    "reblog": {
        "comment": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/153949952?share=copy\",\"display_url\":\"https://vimeo.com/153949952?share=copy\",\"title\":\"Affirmation (2016)\",\"description\":\"Affirmation (2016) uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton wa\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"cd78c9656df6b9381417c980464efff7:86fa2ab3c65a5863-70\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/153949952?share=copy\" target=\"_blank\">Affirmation (2016)</a></p><p>Affirmation <br>2016<br>Single channel video</p><p>Affirmation uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton was badly injured shooting this portion of the film and chose to keep the jarring moment of impact in the finished comedy.</p>",
        "tree_html": ""
    },
    "can_reply": false,
    "display_avatar": true
},
{
    "type": "video",
    "is_blocks_post_format": true,
    "blog_name": "jessicaharbydotcom",
    "id": 744393060798136300,
    "id_string": "744393060798136320",
    "is_blazed": false,
    "is_blaze_pending": false,
    "can_blaze": false,
    "post_url": "https://jessicaharbydotcom.tumblr.com/post/744393060798136320/very-realistic-2021-single-channel-video-in-the",
    "slug": "very-realistic-2021-single-channel-video-in-the",
    "date": "2024-03-08 14:35:43 GMT",
    "timestamp": 1709908543,
    "state": "published",
    "format": "html",
    "reblog_key": "hpmXLQE1",
    "tags": [
        "very realistic"
    ],
    "short_url": "https://tmblr.co/ZXen9PfKdOjw8u00",
    "summary": "Very Realistic\n2021\nSingle channel video \nIn The Great Muppet Caper (1981), reporters Kermit, Fozzie, and Gonzo travel to London...",
    "should_open_in_legacy": false,
    "recommended_source": null,
    "recommended_color": null,
    "note_count": 0,
    "title": "",
    "body": "<figure class=\"tmblr-full tmblr-embed\" data-provider=\"vimeo\" data-url=\"https://vimeo.com/544276930?share=copy\" data-orig-width=\"540\" data-orig-height=\"304\"><iframe src=\"https://player.vimeo.com/video/544276930?title=0&amp;byline=0&amp;portrait=0&amp;app_id=122963\" width=\"540\" height=\"304\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\" title=\"Very Realistic (2021)\"></iframe></figure><p>Very Realistic<br/>2021<br/>Single channel video </p><p>In The Great Muppet Caper (1981), reporters Kermit, Fozzie, and Gonzo travel to London to investigate a jewel theft. Whilst riding in a red double-decker bus over the Thames, the following exchange takes place:</p><p>Fozzie: Wow, look at the scenery!<br/>Gonzo: It’s very realistic.</p><p>It is 2021, we have lived/are living through a collective trauma and during a car ride the landscape turned to a throbbing reality and we secretly begged to be let back inside.</p>",
    "reblog": {
        "comment": "<p><figure class=\"tmblr-full tmblr-embed\" data-provider=\"vimeo\" data-url=\"https://vimeo.com/544276930?share=copy\" data-orig-width=\"540\" data-orig-height=\"304\"><iframe src=\"https://player.vimeo.com/video/544276930?title=0&amp;byline=0&amp;portrait=0&amp;app_id=122963\" width=\"540\" height=\"304\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\" title=\"Very Realistic (2021)\"></iframe></figure><p>Very Realistic<br>2021<br>Single channel video </p><p>In The Great Muppet Caper (1981), reporters Kermit, Fozzie, and Gonzo travel to London to investigate a jewel theft. Whilst riding in a red double-decker bus over the Thames, the following exchange takes place:</p><p>Fozzie: Wow, look at the scenery!<br>Gonzo: It’s very realistic.</p><p>It is 2021, we have lived/are living through a collective trauma and during a car ride the landscape turned to a throbbing reality and we secretly begged to be let back inside.</p></p>",
        "tree_html": ""
    },
    "can_reply": false,
    "display_avatar": true
}
]
let filteredPosts = [];
const output = document.querySelector('.output');
const parser = new DOMParser();

const setPostsByType = () => {
let doc;
let videoThumbnail = '';
for (let i = 0; i < allPosts.length; i++) {
    const item = allPosts[i];
    if (item.body) {
        doc = parser.parseFromString(item.body, 'text/html');
    }
    if (item.type.includes('video')) {
        let videoID = doc.querySelector('a')?.getAttribute('href')?.split('vimeo.com/')[1] 
        ||
        doc.querySelector('[data-url]')?.getAttribute('data-url')?.split('vimeo.com/')[1];
        if (videoID && videoID.includes('?')) {
            videoID = videoID.split('?')[0];
        }
        console.log(videoID);
        fetch(`https://vimeo.com/api/v2/video/${videoID}.json`)
            .then((response) => {
                return response.text();
            })
            .then((data) => {
                const { thumbnail_large } = JSON.parse(data)[0];
                videoThumbnail = thumbnail_large + '.jpg';
                console.log(videoThumbnail);
                return videoThumbnail; // this is asynchronous so being returned after the rest of my function is processed
            })
            .catch((error) => {
                console.log(error);
            });
    }
    const postObject = {
        id: item.id,
        post_id: `postid__${item.id}`,
        body: item.body,
        video_thumbnail_id: videoThumbnail, // this is always empty due to the fetch being asynchronous
        type: item.type,
        tags: item.tags,
        date: item.date
    }
    filteredPosts.push(postObject);
}
};

setPostsByType();
output.textContent = JSON.stringify(filteredPosts, null, 4);

<pre class="output"></pre>

抱歉，数据相当多，这已经是过滤后的集合了。这里还有一个JSFIDDLE：https://jsfiddle.net/lharby/wrLpheok/其中包含更大的数据集。

我知道问题在于 fetch 是异步的，并且映射、for 循环根据事件顺序执行。每个视频帖子的

id's

都会记录到控制台，但在

filteredPosts

数组被推送到之后。

这是我尝试过的：

• 将所有内容包装在异步函数中。
• 创建一个应返回 postObject 的函数，并在

  fetch .then()

  函数内执行该函数（当然，这是包含在 if 语句中的，因此可以根据 post 类型过滤数组中的项目）
• 使用映射而不是 for 循环。

我看到了更多关于 SO 的问题，其中用户希望首先调用 fetch api 端点，然后映射项目，但我的问题是相反的，我只能在迭代每个帖子正文后调用 fetch 函数，并且它有符合我的条件。

非常感谢任何帮助。

Answer 1

只需使用

async/await

，这将使您的代码更具可读性和可管理性。对于复杂的逻辑，请避免使用

.then()

。

const allPosts = [
{
    "type": "image",
    "is_blocks_post_format": true,
    "blog_name": "jessicaharbydotcom",
    "id": 744489834793566200,
    "id_string": "744489834793566208",
    "is_blazed": false,
    "is_blaze_pending": false,
    "can_blaze": false,
    "post_url": "https://jessicaharbydotcom.tumblr.com/post/744489834793566208/shield-2018-wax-display-case-light-shield-is-a",
    "slug": "shield-2018-wax-display-case-light-shield-is-a",
    "date": "2024-03-09 16:13:54 GMT",
    "timestamp": 1710000834,
    "state": "published",
    "format": "html",
    "reblog_key": "4O3x5WWb",
    "tags": [
        "shield"
    ],
    "note_count": 0,
    "title": "",
    "body": "<div class=\"npf_row\"><figure class=\"tmblr-full\" data-orig-height=\"4032\" data-orig-width=\"2640\"><img src=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg\" data-orig-height=\"4032\" data-orig-width=\"2640\" srcset=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s75x75_c1/eb876d72933b6138eeba73ca59499c3809975b61.jpg 75w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s100x200/21f86af6b60e44ba7d90090281dc1a1461494805.jpg 100w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s250x400/eba73e6b36bf95f9473e9276592794923583d9de.jpg 250w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s400x600/f202a41604edd3e6cfeee2f9457620bbc87accff.jpg 393w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s500x750/3def886512d22590bb2b72396d147cb8007ccd46.jpg 491w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s540x810/d83eb22083d9dafb4feae95e2f4a2ca0553e0ae8.jpg 530w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg 629w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s1280x1920/1c03d83fdad14df8334745de77595cd9d2215ce7.jpg 1257w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s2048x3072/ee6e6bf1448c6304fbf6cbed93062b9ca520baf3.jpg 2011w\" sizes=\"(max-width: 1280px) 100vw, 1280px\"/></figure></div><p>Shield<br/>2018<br/>Wax, display case, light</p><p>Shield is a meditation on masculinity and power. The tiles are wax casts of the substantial belt buckle once belonging to the artist&rsquo;s grandfather, who was a Chicago Police Sergeant investigated in the 1970s as part of a ring of police shaking down motorists for payoffs. While eventually granted immunity from prosecution by the state, he was indicted, along with two fellow policemen, for perjury by a grand jury for lying about his involvement.</p>",
    "reblog": {
        "comment": "<p><div class=\"npf_row\"><figure class=\"tmblr-full\" data-orig-height=\"4032\" data-orig-width=\"2640\"><img src=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg\" data-orig-height=\"4032\" data-orig-width=\"2640\" srcset=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s75x75_c1/eb876d72933b6138eeba73ca59499c3809975b61.jpg 75w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s100x200/21f86af6b60e44ba7d90090281dc1a1461494805.jpg 100w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s250x400/eba73e6b36bf95f9473e9276592794923583d9de.jpg 250w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s400x600/f202a41604edd3e6cfeee2f9457620bbc87accff.jpg 393w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s500x750/3def886512d22590bb2b72396d147cb8007ccd46.jpg 491w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s540x810/d83eb22083d9dafb4feae95e2f4a2ca0553e0ae8.jpg 530w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg 629w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s1280x1920/1c03d83fdad14df8334745de77595cd9d2215ce7.jpg 1257w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s2048x3072/ee6e6bf1448c6304fbf6cbed93062b9ca520baf3.jpg 2011w\" sizes=\"(max-width: 1280px) 100vw, 1280px\"></figure></div><p>Shield<br>2018<br>Wax, display case, light</p><p>Shield is a meditation on masculinity and power. The tiles are wax casts of the substantial belt buckle once belonging to the artist’s grandfather, who was a Chicago Police Sergeant investigated in the 1970s as part of a ring of police shaking down motorists for payoffs. While eventually granted immunity from prosecution by the state, he was indicted, along with two fellow policemen, for perjury by a grand jury for lying about his involvement.</p></p>",
        "tree_html": ""
    },
    "can_reply": false,
    "display_avatar": true
},
    {
    "type": "video video-embed",
    "is_blocks_post_format": true,
    "blog_name": "jessicaharbydotcom",
    "id": 744485994035904500,
    "id_string": "744485994035904513",
    "is_blazed": false,
    "is_blaze_pending": false,
    "can_blaze": false,
    "post_url": "https://jessicaharbydotcom.tumblr.com/post/744485994035904513/referendum-ask-me-how-do-i-feel",
    "slug": "referendum-ask-me-how-do-i-feel",
    "date": "2024-03-09 15:12:51 GMT",
    "timestamp": 1709997171,
    "state": "published",
    "format": "html",
    "reblog_key": "qL2EmJnA",
    "tags": [
        "referendum"
    ],
    "short_url": "https://tmblr.co/ZXen9PfKyX4kmu01",
    "summary": "Referendum (Ask Me How Do I Feel)",
    "should_open_in_legacy": false,
    "recommended_source": null,
    "recommended_color": null,
    "note_count": 0,
    "title": "",
    "body": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/181950781\",\"display_url\":\"https://vimeo.com/181950781\",\"title\":\"Referendum (Ask Me How Do I Feel)\",\"description\":\"Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative. The film speaks d\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"ad17645e0781329536708048ee806163:9100d8a78851c197-1c\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/181950781\" target=\"_blank\">Referendum (Ask Me How Do I Feel)</a></p><p>Referendum (Ask Me How Do I Feel) <br/>2016<br/>Single channel video</p><p>Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative, speaking directly to the viewer as the men onscreen debate and decide important matters, failing to provide answers to the direct questions posed. </p>",
    "reblog": {
        "comment": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/181950781\",\"display_url\":\"https://vimeo.com/181950781\",\"title\":\"Referendum (Ask Me How Do I Feel)\",\"description\":\"Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative. The film speaks d\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"ad17645e0781329536708048ee806163:9100d8a78851c197-1c\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/181950781\" target=\"_blank\">Referendum (Ask Me How Do I Feel)</a></p><p>Referendum (Ask Me How Do I Feel) <br>2016<br>Single channel video</p><p>Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative, speaking directly to the viewer as the men onscreen debate and decide important matters, failing to provide answers to the direct questions posed. </p>",
        "tree_html": ""
    },
    "can_reply": false,
    "display_avatar": true
},
{
    "type": "video video-embed",
    "is_blocks_post_format": true,
    "blog_name": "jessicaharbydotcom",
    "id": 744393264438837200,
    "id_string": "744393264438837248",
    "is_blazed": false,
    "is_blaze_pending": false,
    "can_blaze": false,
    "post_url": "https://jessicaharbydotcom.tumblr.com/post/744393264438837248/affirmation-2016",
    "slug": "affirmation-2016",
    "date": "2024-03-08 14:38:57 GMT",
    "timestamp": 1709908737,
    "state": "published",
    "format": "html",
    "reblog_key": "jniGZGhJ",
    "tags": [
        "affirmation"
    ],
    "short_url": "https://tmblr.co/ZXen9PfKdRha4W00",
    "summary": "Affirmation (2016)",
    "should_open_in_legacy": false,
    "recommended_source": null,
    "recommended_color": null,
    "note_count": 0,
    "title": "",
    "body": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/153949952?share=copy\",\"display_url\":\"https://vimeo.com/153949952?share=copy\",\"title\":\"Affirmation (2016)\",\"description\":\"Affirmation (2016) uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton wa\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"cd78c9656df6b9381417c980464efff7:86fa2ab3c65a5863-70\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/153949952?share=copy\" target=\"_blank\">Affirmation (2016)</a></p><p>Affirmation <br/>2016<br/>Single channel video</p><p>Affirmation uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton was badly injured shooting this portion of the film and chose to keep the jarring moment of impact in the finished comedy.</p>",
    "reblog": {
        "comment": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/153949952?share=copy\",\"display_url\":\"https://vimeo.com/153949952?share=copy\",\"title\":\"Affirmation (2016)\",\"description\":\"Affirmation (2016) uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton wa\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"cd78c9656df6b9381417c980464efff7:86fa2ab3c65a5863-70\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/153949952?share=copy\" target=\"_blank\">Affirmation (2016)</a></p><p>Affirmation <br>2016<br>Single channel video</p><p>Affirmation uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton was badly injured shooting this portion of the film and chose to keep the jarring moment of impact in the finished comedy.</p>",
        "tree_html": ""
    },
    "can_reply": false,
    "display_avatar": true
},
{
    "type": "video",
    "is_blocks_post_format": true,
    "blog_name": "jessicaharbydotcom",
    "id": 744393060798136300,
    "id_string": "744393060798136320",
    "is_blazed": false,
    "is_blaze_pending": false,
    "can_blaze": false,
    "post_url": "https://jessicaharbydotcom.tumblr.com/post/744393060798136320/very-realistic-2021-single-channel-video-in-the",
    "slug": "very-realistic-2021-single-channel-video-in-the",
    "date": "2024-03-08 14:35:43 GMT",
    "timestamp": 1709908543,
    "state": "published",
    "format": "html",
    "reblog_key": "hpmXLQE1",
    "tags": [
        "very realistic"
    ],
    "short_url": "https://tmblr.co/ZXen9PfKdOjw8u00",
    "summary": "Very Realistic\n2021\nSingle channel video \nIn The Great Muppet Caper (1981), reporters Kermit, Fozzie, and Gonzo travel to London...",
    "should_open_in_legacy": false,
    "recommended_source": null,
    "recommended_color": null,
    "note_count": 0,
    "title": "",
    "body": "<figure class=\"tmblr-full tmblr-embed\" data-provider=\"vimeo\" data-url=\"https://vimeo.com/544276930?share=copy\" data-orig-width=\"540\" data-orig-height=\"304\"><iframe src=\"https://player.vimeo.com/video/544276930?title=0&amp;byline=0&amp;portrait=0&amp;app_id=122963\" width=\"540\" height=\"304\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\" title=\"Very Realistic (2021)\"></iframe></figure><p>Very Realistic<br/>2021<br/>Single channel video </p><p>In The Great Muppet Caper (1981), reporters Kermit, Fozzie, and Gonzo travel to London to investigate a jewel theft. Whilst riding in a red double-decker bus over the Thames, the following exchange takes place:</p><p>Fozzie: Wow, look at the scenery!<br/>Gonzo: It’s very realistic.</p><p>It is 2021, we have lived/are living through a collective trauma and during a car ride the landscape turned to a throbbing reality and we secretly begged to be let back inside.</p>",
    "reblog": {
        "comment": "<p><figure class=\"tmblr-full tmblr-embed\" data-provider=\"vimeo\" data-url=\"https://vimeo.com/544276930?share=copy\" data-orig-width=\"540\" data-orig-height=\"304\"><iframe src=\"https://player.vimeo.com/video/544276930?title=0&amp;byline=0&amp;portrait=0&amp;app_id=122963\" width=\"540\" height=\"304\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\" title=\"Very Realistic (2021)\"></iframe></figure><p>Very Realistic<br>2021<br>Single channel video </p><p>In The Great Muppet Caper (1981), reporters Kermit, Fozzie, and Gonzo travel to London to investigate a jewel theft. Whilst riding in a red double-decker bus over the Thames, the following exchange takes place:</p><p>Fozzie: Wow, look at the scenery!<br>Gonzo: It’s very realistic.</p><p>It is 2021, we have lived/are living through a collective trauma and during a car ride the landscape turned to a throbbing reality and we secretly begged to be let back inside.</p></p>",
        "tree_html": ""
    },
    "can_reply": false,
    "display_avatar": true
}
]
const output = document.querySelector('.output');
const parser = new DOMParser();

const setPostsByType = () => {
  let doc;
  let videoThumbnail = '';
  return Promise.all(allPosts.map(async item => {
      if (item.body) {
          doc = parser.parseFromString(item.body, 'text/html');
      }
      let videoThumbnail = null;
      if (item.type.includes('video')) {
          let videoID = doc.querySelector('a')?.getAttribute('href')?.split('vimeo.com/')[1] 
          ||
          doc.querySelector('[data-url]')?.getAttribute('data-url')?.split('vimeo.com/')[1];
          if (videoID && videoID.includes('?')) {
              videoID = videoID.split('?')[0];
          }
          console.log(videoID);
          videoThumbnail = await fetch(`https://vimeo.com/api/v2/video/${videoID}.json`)
              .then((response) => {
                  return response.text();
              })
              .then((data) => {
                  const { thumbnail_large } = JSON.parse(data)[0];
                  videoThumbnail = thumbnail_large + '.jpg';
                  console.log(videoThumbnail);
                  return videoThumbnail; // this is asynchronous so being returned after the rest of my function is processed
              })
              .catch((error) => {
                  console.log(error);
              });
      }
      return {
          id: item.id,
          post_id: `postid__${item.id}`,
          body: item.body,
          video_thumbnail_id: videoThumbnail, // this is always empty due to the fetch being asynchronous
          type: item.type,
          tags: item.tags,
          date: item.date
      }
  }));
};

setPostsByType().then(filteredPosts => {
  output.textContent = JSON.stringify(filteredPosts, null, 4);
});

<pre class="output"></pre>