Flutter WebView调用runJavascriptReturningResult返回{}问题求助

问题根源 #

getSomeData是异步函数，返回的是Promise对象：

• 直接调用runJavascriptReturningResult('getSomeData()')时，Flutter拿到的是Promise对象的字符串化结果（即{}），因为Promise本身是一个无可枚举属性的对象。
• 尝试添加await时，若未将调用包裹在async函数中，会触发JS语法错误，导致返回null。

浏览器控制台能正常显示结果是因为控制台会自动等待Promise resolve并展示最终值，但Flutter的runJavascriptReturningResult不具备这个特性。

解决方案 #

方案一：用JavaScriptChannel接收异步结果（推荐） #

通过Flutter的JavaScriptChannel实现JS到Flutter的消息传递，适配异步请求场景更可靠。

Flutter 端代码

WebView(
  initialUrl: '你的React/Next应用地址',
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: {
    JavascriptChannel(
      name: 'DataChannel',
      onMessageReceived: (JavascriptMessage message) {
        // 处理JS发送的结果
        print('获取到数据：${message.message}');
        final parsedData = jsonDecode(message.message);
        // 后续业务逻辑
      },
    ),
  },
  onPageFinished: (url) async {
    final controller = await _controllerCompleter.future;
    // 直接调用函数触发请求，无需等待返回值
    controller.runJavascript('getSomeData()');
  },
)

JS 端（React/Next）代码

const getSomeData = useCallback(async () => {
  try {
    const response = await axios.get('/api/getData');
    // 通过DataChannel将结果发送给Flutter
    window.DataChannel.postMessage(JSON.stringify(response));
  } catch (e) {
    window.DataChannel.postMessage(JSON.stringify(e));
  }
}, []);

useEffect(() => {
  window.getSomeData = getSomeData;
}, [getSomeData]);

方案二：包裹成自执行async函数（兼容性一般） #

若坚持使用runJavascriptReturningResult，可将调用包裹在自执行async函数中，强制等待Promise resolve：

var result = await controller.runJavascriptReturningResult('(async () => await getSomeData())()');

注意：部分WebView版本可能存在Promise处理问题，导致返回值仍异常，因此优先推荐方案一。

内容的提问来源于stack exchange，提问作者Marco Antonio Soares Júnior