Flutter Web中HttpRequest异步执行顺序异常，await无效求助

你的问题核心在于：request.onLoad.listen()是异步流监听，它不会阻塞后续代码执行，导致print('We are here')和return Left(errorMessage)在请求还没完成时就运行了，自然拿不到请求返回后的success和errorMessage值。直接加await没用是因为listen方法不返回Future，无法被await等待。

修复方案：将流监听转为Future等待 #

把request.onLoad.listen替换为await request.onLoad.first，让代码暂停到请求完成后再继续执行，这样就能拿到正确的响应状态和数据。

修改后的完整代码：

Future<Either<String, void>> createAvailableService(
  String name, XFile image, String imageName) async {
  String errorMessage = 'Something went wrong, please try again later.';
  try {
    html.File imageFile = html.File([await image.readAsBytes()], image.path);
    var request = html.HttpRequest()
      ..open('POST', APIs.CREATE_AVAILABLE_SERVICE);
    var formData = html.FormData()..appendBlob('image', imageFile);
    formData.append('name', name);
    formData.append('image_name', imageName);
    request.send(formData);

    // 等待请求加载完成，替代原有的listen监听
    await request.onLoad.first;

    bool success = true;
    if (request.status == 200) {
      success = true;
      // 请求成功时返回Right类型，符合Either的定义
      return const Right(null);
    } else if (request.status == 400 || request.status == 500) {
      errorMessage = jsonDecode(request.response.toString())['message'];
      success = false;
      print('$success ${errorMessage}');
    } else {
      success = false;
    }

    print('We are here');
    return Left(errorMessage);
  } catch (exception) {
    return Left(errorMessage);
  }
}

关键修改点说明 #

1. 替换异步监听为Future等待：用await request.onLoad.first替代listen，确保代码在请求完成后再执行后续逻辑，保证能拿到最新的success和errorMessage。
2. 修正返回值逻辑：原代码不管请求成功与否都返回Left(errorMessage)，不符合Either<String, void>的类型约定，请求成功时要返回Right(null)。
3. 处理请求异常（可选）：如果担心请求过程中出现错误导致代码卡住，可以同时监听错误流：

   // 同时等待加载完成和错误事件，避免未处理异常
   await Future.wait([
     request.onLoad.first,
     request.onError.first.catchError((_) {})
   ]);
   

额外建议 #

如果项目允许，推荐使用Flutter官方的http包或者dio包处理网络请求，这些库基于Future封装，写法更简洁直观，无需手动处理底层的流监听逻辑。

内容的提问来源于stack exchange，提问作者Haya Hesham Abdel-azim