如何从Flutter调用JS异步函数并获取结果？Flutter Web转Promise为Future

1. 修正JavaScript端代码 #

先补全原代码中遗漏的搜索文本参数，简化后的asyncTest函数本身会返回Promise（async函数默认返回Promise）：

<script>
  const client = algoliasearch("4HURXXXXX", "xxxxxb8fxxxx");
  async function asyncTest(indexName, searchText) {
    const index = client.initIndex(indexName);
    // 传入搜索关键词执行Algolia搜索
    return await index.search(searchText);
  }
</script>

2. Flutter Dart端转换Promise为Future #

使用dart:js_util库的promiseToFuture方法，将JS返回的Promise直接转换为Dart的Future，就能用Dart的异步语法处理结果：

import 'dart:js' as js;
import 'dart:js_util' as js_util;

// 封装搜索方法
Future<void> getAlgoliaSearchResults(String searchValue) async {
  try {
    // 调用JS端的asyncTest函数，获取JS Promise对象
    final jsPromise = js.context.callMethod('asyncTest', ['stock_items', searchValue]);
    // 将JS Promise转换为Dart Future
    final searchResults = await js_util.promiseToFuture(jsPromise);
    
    // 提取搜索结果中的hits数据（根据Algolia返回格式）
    final hits = js_util.getProperty(searchResults, 'hits');
    // 这里可以根据业务需求处理hits数据
    print('获取到搜索结果：$hits');
  } catch (error) {
    // 捕获搜索过程中的错误
    print('搜索失败：$error');
  }
}

关键说明 #

• JavaScript的async函数天然返回Promise，无需额外处理回调
• dart:js_util.promiseToFuture是官方提供的工具方法，专门用于在Flutter Web中实现JS Promise与Dart Future的双向转换
• 处理JS返回的对象时，需用js_util.getProperty来读取属性，避免直接访问导致的类型错误

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