Question

我尝试用英语解释，但我不会说。

我在Ionic 2工作。我尝试用post方法做一个http请求，我在SDK Android模拟器中模拟，我可以在logcat中看到：

无法调用方法＆＃39;发布＆＃39;未定义的文件：///android_asset/www/build/js/app.bundle.js：2265

但我查看并且没有看到任何内容，我重写了我的clientId和ClientSecret，可以在这里发布。我在login函数中放了一个跟踪console.log（this.http），这个属性是未定义的，尽管是在类中注入的。构造

我的代码：

import {Page, Platform} from 'ionic-angular';
import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';

@Page({
    templateUrl: 'build/pages/home/home.html',
    providers: [ HTTP_PROVIDERS ]
})
export class HomePage {

    static get parameters() {
        return [[Platform],[Http]];
    }

    constructor(platform, http) {
        this.platform = platform;
        this.http = http;
        this.clientId = "clientId";
        this.clientSecret = "clientSecret";
    }

    login() {
        this.platform.ready().then(() => {
            this.googleLogin().then((success) => {
                alert(success.access_token);
            }, (error) => {
                alert(error);
            });
        });
    }

    googleLogin() {
        return new Promise(function(resolve, reject) {
            var browserRef = window.cordova.InAppBrowser.open("https://accounts.google.com/o/oauth2/auth?client_id=" + "clientId" + "&redirect_uri=http://localhost/callback&scope=email%20profile&approval_prompt=force&response_type=code&access_type=offline", "_blank", "location=no,clearsessioncache=yes,clearcache=yes");
            browserRef.addEventListener("loadstart", (event) => {
                if ((event.url).indexOf("http://localhost/callback") === 0) {
                    var headers = new Headers();
                    headers.append('Content-Type', 'application/x-www-form-urlencoded');
                    var parameters = "client_id=" + "clientId" + "&client_secret=" + "clientSecret" + "&redirect_uri=http://localhost/callback" + "&grant_type=authorization_code" + "&code=" + requestToken

                    var requestToken = (event.url).split("code=")[1];
                    this.http.post("https://accounts.google.com/o/oauth2/token", parameters, { header:headers })
                    .subscribe( data => { resolve(data); },
                                error => { reject("Problem authenticating with Google"); }
                    );

                    browserRef.removeEventListener("exit", (event) => {});
                    browserRef.close();
                }
            });
            browserRef.addEventListener("exit", function(event) {
                reject("The Google sign in flow was canceled");
            });
        });
    }
}

代码尝试使用Google OAuth2进行身份验证，虽然错误似乎是在构造函数（http，clientId，clientSecret）中的属性中，但在调用登录函数时没有定义。我不知道出了什么问题！

Answer 1

这可能与“这个”的范围有关，具体取决于调用googleLogin功能的内容。尝试使用箭头功能：

googleLogin = () => {
        ...
}

Answer 2

这是因为在定义承诺时不使用箭头功能。因此this关键字与组件本身的实例不对应。使用箭头函数，您可以使用与组件实例对应的词法this。

googleLogin() {
  return new Promise((resolve, reject) => {
    (...)
  });
}

而不是

googleLogin() {
  return new Promise(function(resolve, reject) {
    (...)
  });
}

有关箭头函数的词法this的更多提示，请参阅此链接：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions。

未捕获的TypeError：无法调用方法＆＃39; post＆＃39;未定义的文件：///android_asset/www/build/js/app.bundle.js Ionic 2

2 个答案: