Uncaught TypeError: Cannot call method 'post' of undefined at file:///android_asset/www/build/js/app.bundle.js Ionic 2

Question

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

我在 Ionic 2 中工作。我尝试使用 post 方法发出 http 请求，我在 SDK Android 模拟器中进行模拟，我可以在 logcat:

Cannot call method 'post' of undefined at file:///android_asset/www/build/js/app.bundle.js:2265

但是我查看了一下，没有看到任何东西，我在这里重写了我的 clientId 和 ClientSecret 可以 post。我在登录函数中放置了一个跟踪 console.log(this.http) 并且此属性未定义，尽管在 class' 构造函数中注入。

我的代码：

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

它可能与 'this' 的作用域有关，具体取决于调用 googleLogin 函数的内容。尝试使用箭头函数：

googleLogin = () => {
        ...
}

Answer 2

这是因为您在定义 promise 时没有使用箭头函数。所以 this 关键字不对应于组件本身的实例。使用箭头函数，您可以使用对应于组件实例的词法 this。

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

而不是

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

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

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

Uncaught TypeError: Cannot call method 'post' of undefined at file:///android_asset/www/build/js/app.bundle.js Ionic 2

Uncaught TypeError: Cannot call method 'post' of undefined at file:///android_asset/www/build/js/app.bundle.js Ionic 2

android

angularjs

ionic2

angular