js-interop：如何在回调函数中访问输入数据？

Question

I've written a wrapper class to access Google Sheet using the javascripts API (as Dart version of Google API is not working). In the callback function, I can see the data are stored in the body and results field in the debugger on Dartium but could not access them from Dart. Any suggestion would be much appreciated. The program is using Dart 1.18.

Javascript Code

var googleStorage = new GoogleStorage();
function GoogleStorage() {

    this.CLIENT_ID = 'XXXXXXX';
    this.SCOPES = ["https://www.googleapis.com/auth/spreadsheets.readonly"];
}

GoogleStorage.prototype.authorize = function(handleAuthResult) {
    gapi.auth.authorize( {
        client_id: this.CLIENT_ID, scope: this.SCOPES, immediate: false
    }, handleAuthResult);

    return false;
}

GoogleStorage.prototype.loadTraitUrl = function(handleLoadUrlResult) {
    console.log("loadConnectionUrl");
    var discoveryUrl = 'https://sheets.googleapis.com/$discovery/rest?version=v4';
    gapi.client.load(discoveryUrl).then(handleLoadUrlResult);
}

GoogleStorage.prototype.listTraits = function(successFunc, errorFunc) {

   console.log("listData");

   gapi.client.sheets.spreadsheets.values.get({
        spreadsheetId: 'YYYYY',
        range: 'Taits!B8:AQ',
   }).then(successFunc, errorFunc);

}

Dart Wrapper Class

@JS()
library my_workbench.lib.common.google_storage;

import 'package:js/js.dart';

@JS('googleStorage')
class GoogleStorage {
    external static authorize(Function handler);
    external static traitLoadUrl(Function handler);
    external static listTraits(Function success, Function error);
}

Dart Program

main() async {
  querySelector("#my_button").onClick.listen(handleEvent);
}

void handleEvent(MouseEvent event) {
  print("Button Clicked");

  GoogleStorage.authorize(
      allowInterop((var authResult) {
          handleAuthResult(authResult);
      })
  );
}

void handleAuthResult(var authResult) {
    print("Successful Authenticated: ${authResult}");

   GoogleStorage.traitLoadUrl(
      allowInterop((_) {
          handleLoadUrlResult();
      })
   );
}

void handleLoadUrlResult() {
    print("Successful loaded URL");
    GoogleStorage.listTraits(
        allowInterop((var response) {
            // var range = response.body;
            print("Success: ${response.body}");
        }), allowInterop((var response) {
            print("Success: ${response}");
    }));
}

Answer 1

Finally found the solution. The problem is apparently caused by allowInterop() not working with js response that contains non supported data type. By returning just the array list of data, it works perfectly. The js list is correctly mapped over to Dart's list by allowInterop() .

Javascript Code

GoogleStorage.prototype.listTraits = function(successFunc, errorFunc) {

   console.log("listData");

   gapi.client.sheets.spreadsheets.values.get({
       spreadsheetId: 'YYYYY',
       range: 'Taits!B8:AQ',
   }).then(function(response) {
       successFunc(response.result.values);
   }, function(response) {
       errorFunc(response.result.error.message);
   });

}

Dart Program

void handleLoadUrlResult() {

    print("Successful loaded URL");
    GoogleStorage.listTraits(
        allowInterop((var response) {
            print("Success: ${response.length}");
        }), allowInterop((var response) {
            print("Failed: ${response}");
    }));
}