如何将Dart Future转为JavaScript Promise并访问LoginResponse属性

1. 在浏览器控制台访问LoginResponse的属性 #

Dart编译为JS后，自定义类的实例默认对JS是不透明的，无法直接访问其属性，你可以通过以下两种方式解决：

方法一：将返回值转为JS原生对象 #

修改login函数，返回一个用JsObject.jsify()包装的普通对象，这样JS可以直接访问属性：

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

final Dio _dio = Dio();

class LoginResponse extends GenericResponse {
  String? accessToken;
  String? refreshToken;

  LoginResponse(statusCode, this.accessToken, this.refreshToken)
      : super(statusCode);
}

Future<dynamic> login(String phoneNumber, String password, String otp) async {
  Response response = await _dio.post(
    "https://example.com/token/obtain/",
    data: {'phone_number': phoneNumber, 'password': password, 'otp': otp},
    options: Options(validateStatus: (status) => status! < 500),
  );
  // 将LoginResponse的属性转为JS可访问的对象
  return JsObject.jsify({
    'statusCode': response.statusCode,
    'accessToken': response.data['access'],
    'refreshToken': response.data['refresh'],
  });
}

main() => context['loginFromDart'] = login;

之后在浏览器控制台中可以直接访问属性：

loginFromDart('你的手机号', '密码', '验证码')
  .then(res => {
    console.log('accessToken:', res.accessToken);
    console.log('refreshToken:', res.refreshToken);
  });

方法二：给Dart类添加可被JS调用的方法 #

如果需要保留LoginResponse类结构，可以给类添加获取属性的方法，JS通过调用这些方法获取值：

class LoginResponse extends GenericResponse {
  String? accessToken;
  String? refreshToken;

  LoginResponse(statusCode, this.accessToken, this.refreshToken)
      : super(statusCode);

  // 添加供JS调用的方法
  String? getAccessToken() => accessToken;
  String? getRefreshToken() => refreshToken;
}

在JS中通过调用方法获取属性：

loginFromDart('你的手机号', '密码', '验证码')
  .then(res => {
    console.log('accessToken:', res.getAccessToken());
    console.log('refreshToken:', res.getRefreshToken());
  });

2. Dart Future转JavaScript Promise #

不需要额外转换操作——Dart编译器会自动将Future类型转换为JS的Promise。你直接在JS中用Promise的标准语法（.then()/.catch()或async/await）处理即可，示例代码如上。

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