Obsidian插件开发：如何在query函数中处理Promise并填充结果？

问题核心 #

你的代码存在两个关键问题：

1. query函数使用await但未标记为async，会触发语法错误；
2. 即使修正async，query会返回Promise<string[]>，但getItems必须返回同步的string[]（基类签名限制），直接返回Promise会导致模态框无法正常渲染建议。

正确实现方案 #

由于无法修改getItems的签名，我们需要通过维护类内状态+异步更新后触发刷新的方式来实现：

1. 在类中添加一个属性存储搜索结果；
2. 重写onChange方法（输入框内容变化时触发），在里面执行异步请求；
3. 请求完成后更新结果数组，调用updateSuggestions()刷新模态框；
4. getItems直接返回维护的结果数组。

修改后的完整代码：

export default class DictionarySuggester extends FuzzySuggestModal<string> {
    // 类内维护搜索结果
    private autocompleteResults: string[] = [];

    async getAutocompleteItems(term: string) {        
        const response = await request({ url: this.autocompleteUrl.replace('{0}', term) });
        return JSON.parse(response); // 直接解析后返回，避免重复解析
    }

    // 重写输入变化处理方法
    onChange(value: string): void {
        const searchTerm = value.toLocaleLowerCase();
        if (!searchTerm) {
            this.autocompleteResults = [];
            this.updateSuggestions();
            return;
        }

        // 执行异步请求并更新结果
        this.getAutocompleteItems(searchTerm)
            .then(jsonObj => {
                this.autocompleteResults = jsonObj.results.map(item => item.term);
                this.updateSuggestions(); // 刷新建议列表
            })
            .catch(err => {
                console.error('获取自动补全数据失败:', err);
                this.autocompleteResults = [];
                this.updateSuggestions();
            });
    }

    query(term: string): string[] {
        // FuzzySuggestModal内部会用这个方法过滤结果，直接返回维护的数组即可
        return this.autocompleteResults;
    }

    getItems(): string[] {
        // 直接返回类内维护的结果数组
        return this.autocompleteResults;
    }
}

关键改动说明 #

• 新增autocompleteResults属性存储异步获取的结果，替代原来的临时数组；
• 重写onChange方法，在输入变化时触发异步请求，避免在同步方法里强制处理异步逻辑；
• 请求完成后更新结果数组并调用updateSuggestions()，这是Obsidian模态框提供的刷新方法；
• query和getItems直接返回维护的数组，符合基类的同步签名要求。

这样既遵守了基类的方法签名限制，又正确处理了异步API请求，实现了自动补全的功能。

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