如何简化调用JSON API的JS查询 避免重复填写视频ID

优化方案 #

你可以把视频ID抽成函数入参，同时用方括号语法访问对象的动态属性，彻底避免硬编码ID，优化后的代码如下：

// 视频ID作为函数入参，调用时直接传入CMS输出的ID即可
async function getVideoInfo(videoId) {
    const request = {
        item: {
            name: "example",
            colour: "red"
        },
        video: [videoId]
    };
    const url = new URL("https://example.com"); 
    url.searchParams.append('data', JSON.stringify(request));
    const response = await fetch(url);
    const data = await response.json();
    return data;
}

// 方式1：如果CMS已经把视频ID渲染到页面的data-video-id属性上，直接读取即可
const targetEle = document.querySelector('[data-video-id]');
const cmsVideoId = targetEle.dataset.videoId;

getVideoInfo(cmsVideoId).then(data => {
    // 方括号语法实现动态属性访问，不用写死视频ID
    targetEle.innerHTML = data.video[cmsVideoId].label
});

适配说明 #

如果你的CMS是直接把视频ID注入到JS模板里，直接把cmsVideoId的赋值替换成对应模板输出的变量即可，比如模板语法是{{ video_id }}就写const cmsVideoId = '{{ video_id }}'，适配你当前的CMS模板规则就行。

内容的提问来源于stack exchange，提问作者Matt