来自外部库方法的 withProgress 的阻塞 UI 线程答案

【问题标题】：Blocked UI Thread for withProgress coming from external library method来自外部库方法的 withProgress 的阻塞 UI 线程
【发布时间】：2020-12-17 07:38:00
【问题描述】：

我目前正在开发一个非常完整的扩展程序，但我正在尝试添加一些可视化指示器来完成更长的运行任务。我最初的猜测是我的代码中缺少 async/await，但我找不到罪魁祸首。直到我的代码完成并且我已经能够追踪阻塞 UI 线程的方法之后，我的进度指示器才会显示（注释掉这个方法可以解决所有问题）。罪魁祸首是来自我正在使用的外部包的方法。

下面是我正在尝试做的精简代码 sn-p：

import { composeAndValidate } from "@apollo/federation";

vscode.window.withProgress(
{
    location: vscode.ProgressLocation.Notification,
    title: 'Composing',
    cancellable: false
},
async progress => {
    const sdls = await getSdls()

    //The call to composeAndValidate is blocking UI thread
    const results = composeAndValidate(sdls);

    ...some other code
})

//Somewhere else
async function getSdls(){
    ... async stuff
    return [{name: 'test', typeDefs: 'type Query { me: String }`}];
}

似乎我需要更深入地了解@apollo/federation 库，但我没有看到在这些方法调用中使用了任何 Promise（尽管我没有深入了解graphql-js 方面的内容）。

关于如何进一步调查解锁 UI 线程的任何想法？这对我的大多数用例来说都不是问题，但我的扩展中非常大的设计会导致大约 3 秒的延迟，这不会提示 VS Code 终止扩展，而只是暂时混淆。

【问题讨论】：

标签： javascript typescript vscode-extensions

【解决方案1】：

我能够通过在我的解决方案中使用 yield 来完成这项工作。我最终使用了对上面代码示例的调整：

vscode.window.withProgress(
{
    location: vscode.ProgressLocation.Notification,
    title: 'Composing',
    cancellable: false
},
async progress => {
    const sdls = await getSdls()

    //The call to composeAndValidate is blocking UI thread
    const results = getCompositionResults(sdls).next().value;

    ...some other code
})

function* getCompositionResults(sdls){
    yield composeAndValidate(sdls);
}

//Somewhere else
async function getSdls(){
    ... async stuff
    return [{name: 'test', typeDefs: 'type Query { me: String }`}];
}

注意：使用 yield 通常意味着您必须将大量同步内容转换为异步，so read up on this，但就我而言，它成功了.

产量并非 100% 微不足道，它们意味着您必须将大量同步内容转换为异步，并确保您不依赖任何地方假设“代码是同步的，因此没有其他代码正在修改它的数据结构触摸

【讨论】：