JavaScript使用video-url-link时如何让回调内数据在作用域外持久化

你当前的实现不生效的核心原因是videoUrlLink.twitter.getInfo是异步回调风格的API：函数调用后不会等待网络请求完成就会继续向下执行，因此你return nfo的时候，给nfo赋值的回调函数还没有被触发，返回的永远是初始的空对象。

方案1：使用Promise封装异步操作 #

将getInfo的回调逻辑封装为Promise，调用方通过.then()获取结果，示例代码如下：

const get_twitter_video_info = (video_url) => {
    // 返回Promise对象，异步完成后触发resolve/reject
    return new Promise((resolve, reject) => {
        try {
            videoUrlLink.twitter.getInfo(
                video_url,
                {},
                (error, video_info) => {
                    if (error) {
                        console.log(error);
                        return reject(error);
                    }
                    if (video_info) {
                        // 无需深拷贝除非你有后续修改原对象的需求
                        resolve(video_info);
                    }
                }
            );
        } catch(err) {
            console.log(err);
            reject(err);
        }
    })
}

// 调用示例
get_twitter_video_info('你的目标视频链接')
    .then(info => {
        // 这里可以拿到完整的info对象，也可以赋值给外部变量持久存储
        console.log(info.full_text, info.variants);
    })
    .catch(err => {
        // 自定义错误处理逻辑
    })

方案2：配合async/await使用（更符合同步书写习惯） #

在支持ES7语法的环境中，可以用async/await调用上面封装好的Promise，写法更简洁直观：

// await语法必须在async函数内部使用
const getInfoHandler = async () => {
    try {
        const info = await get_twitter_video_info('你的目标视频链接');
        // 这里可以正常使用info对象，也可以赋值给外部变量持久存储
        console.log(info.full_text, info.variants);
    } catch (err) {
        // 自定义错误处理逻辑
    }
}

getInfoHandler();

注意：不要尝试用纯同步的方式直接获取异步返回的结果，所有对info的操作要么放在.then的回调里，要么放在await之后的逻辑中，否则还是会出现变量未赋值的问题。

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