angular2 http.post 方法抛出 typeerror 异常

Posted 2023-03-13

【中文标题】angular2 http.post 方法抛出 typeerror 异常

【英文标题】：angular2 http.post method throws typeerror exceptionangular2 http.post 方法抛出 typeerror 异常

【发布时间】：2016-05-05 18:36:11

【问题描述】：

我尝试根据需要将现有的 angularjs 库更改为 angular2。以下代码中的 http.post 方法将 TypeError 作为异常抛出。有人请帮忙，因为我被困在这个问题上。

login() 
  return new Promise((resolve, reject) => 
    if(typeof jsSHA !== "undefined") 
      var signatureObj = (new OauthUtility()).createSignature("POST", this.magentoOptions.baseUrl+"/oauth/initiate", this.oauthObject, oauth_callback: "http://localhost/callback", this.magentoOptions.clientSecret, null);                                   
      let headersInitiate = new Headers();
      headersInitiate.append('Authorization',signatureObj.authorization_header);
      headersInitiate.append('Content-Type','application/x-www-form-urlencoded');
      let url = this.magentoOptions.baseUrl + "/oauth/initiate";
      let callback = "oauth_callback=http://localhost/callback";

      try
        this.http.post(url, callback,headers: headersInitiate)
         .subscribe(
          (result) => 
          console.log("i am inside");
          var rParameters = (result).split("&");
                            .....
      
      catch(Exception)
        console.log(Exception)
      

【参考方案1】：

你应该尝试这样的事情：

var signatureObj = (new OauthUtility()).createSignature("POST", 
     this.magentoOptions.baseUrl+"/oauth/initiate", this.oauthObject,
     oauth_callback: "http://localhost/callback",
     this.magentoOptions.clientSecret, null);    let headersInitiate = new Headers();

headersInitiate.append('Authorization',
          signatureObj.authorization_header);
headersInitiate.append('Content-Type',
          'application/x-www-form-urlencoded');
let url = this.magentoOptions.baseUrl + "/oauth/initiate";

let payload = ' ... ';
this.http.post(url, payload,headers: headersInitiate)
    .subscribe(
      (result) => 
        console.log("i am inside");
        var rParameters = (result).split("&");
        (...)
      );

以下是我将在您的代码中使用的 cmets：

post 方法的第二个参数应该是对应于负载的字符串，而不是回调。我从您的标头中看到您要发送 url 编码的表单，因此您需要自己创建它 try catch 不是必需的，因为执行 HTTP 是异步的，并且可以在 subscribe 方法的第二个参数（另一个回调）中“捕获”错误。 你根本不需要承诺。对于 HTTP，Angular2 在底层使用 observables。它们也以异步处理为目标。

修复所有这些后，我认为您不会再有错误了......

希望对你有帮助 蒂埃里

【讨论】：

感谢@Thierry 的回复。我在我的 POST 方法中通过变量回调传递了参数。让回调=“oauth_callback=localhost/callback”；抱歉，我在之前的代码中错过了它。我没有在 subscribe 方法的第二个参数中发现我的错误。这就是我包含 try catch 的原因。也许我会尝试排除承诺。

我尝试删除承诺，但我遇到了问题。问题的原因是 http 未定义。我也包括了@Injectable，但问题仍然存在。请帮忙

你是否在bootstrap函数的第二个参数中添加了HTTP_PROVIDERS？

非常感谢。我能够进入函数内部:)

【参考方案2】：

即使在执行上述所有步骤后，我发现卡住了。完整的解决方案如下。 按照 Thierry 的建议删除 try catch 块和承诺。 在构造函数中使用http的依赖注入如下定义http。

import Http,HTTP_PROVIDERS,Headers from 'angular2/http';
import Injector from "angular2/core";
 constructor() 

        var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
        this.http = injector.get(Http);

【讨论】：

为什么不从构造函数中注入Http？这可以在bootstrap 函数或使用http 对象的组件中注册 HTTP_PROVIDERS 时完成。这样你就不需要显式引用Injector...

我正在为我的 ionic2 应用程序创建 anguar2 库。由于这充当服务，因此在构造函数中注入的 Http 不起作用。它仍然未定义。这就是我的代码出错的原因。当我用注射器注射时，它工作正常。

您是否将@Injectable 装饰器添加到您的服务中？

是的，我做到了。但它没有用。我也尝试在我的构造函数中使用@Inject(HTTP) http: Http。我不知道为什么它不起作用。

我应该 ;-) 你用过这个吗：bootstrap(AppComponent, [ HTTP_PROVIDERS ]);?