如何在 Flutter 中异步调用 JavaScript？答案

【问题标题】：How to asynchronously call JavaScript in Flutter?如何在 Flutter 中异步调用 JavaScript？
【发布时间】：2020-07-02 08:25:40
【问题描述】：

我有一个颤动的网络，我有一个这样的 JavaScript 函数：

async function doSomething(value) {
   let x = await something(x);
   return x
}

当我现在参加飞镖比赛时，我有：

final result = await js.context.callMethod('doSomething', ['someValue']));

当我打印它时它返回[object Promise]，但它确实忽略了await，没有.then 函数，因此也不能与promiseToFuture 一起使用。

如何等待 JavaScript 执行？

【问题讨论】：

您能否分享一个没有.then 的示例承诺。
我也希望你做了类似final result = await promiseToFuture(js.context.callMethod('doSomething', ['someValue'])));

标签： flutter flutter-web

【解决方案1】：

将其放在 index.html 中

<script src="script.js" defer></script>

在 Script.js 中

async function showAlert(href,hashtag,quote) {
      if (response) {   
      window.dartFunc("asd");
      dartFunc("asd");        
      } else if () {
          alert("error adding points");     
      }
      else{
            alert("error dialog close");
      }
  });
};

在 initstate() 的 dart 文件中

setProperty(window, 'dartFunc', js.allowInterop(dartFunc));

sss() async {
 await js.context.callMethod('showAlert', [
      '',
      '',
      ''
    ]);
}

String dartFunc(String str) {
    Common.showToast('Music');
    Common.showToast(str);

    return 'Inside dartFunc: ' + str;
  }

【讨论】：

【解决方案2】：

await 不适用于 js.context.callMethod。

这必须添加到你的代码中，比如javascript_controller.dart

@JS()
library script.js;

import 'package:js/js.dart';
import 'dart:js_util';

@JS()
external dynamic doSomething();

然后

Future getSomething(String someValue) async {
  var result = await promiseToFuture(doSomething());
  return result;
}

【讨论】：

【解决方案3】：

也许使用 Future builder 来等待 JS 执行？

Future getSomething(String someValue) async {
  var result = await js.context.callMethod('doSomething', [someValue]));
  return result;
}

FutureBuilder(
        future: getSomething(someValue),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            var data = snapshot.data;
            print(data);
          } else {
            return Loading();
          }
        });

【讨论】：

【解决方案4】：

我尝试使用 async 从 js 文件异步执行相同的方法，并在 dart 文件中使用 --promisetofuture，但我无法等到我们从 js 文件中获得 Flutter web 的响应

async function getPhoneNumber() {
    let res = await someFunction to wait for someTime;
    return res;
}

function somfunc() async{
    var number = await 
    promiseToFuture(js.context.callMethod('getPhoneNumber'));
}

【讨论】：