Api post call 在使用 Angular 4 时不起作用答案

【问题标题】：Api post call is not working in using Angular 4Api post call 在使用 Angular 4 时不起作用
【发布时间】：2020-05-02 22:53:23
【问题描述】：

我正在使用 web api 2 在 angular 4 中工作，我的 post call 不工作并没有点击 api。问题是它甚至没有给我一个错误。这是我的代码

 registerUser() {
    this.confirmPasswordMessage = false;
    if (this.registerForm.valid) {
      this.confirmPasswordMessage = false;
         if (this._registerModel.Password.trim() !== this._registerModel.ConfirmPassword.trim()) {
             this.confirmPasswordMessage = true;
             this._progressBar.done();
             return false;
        }
        const _data = JSON.stringify(this._registerModel);
        this._apiService.postCall('Account/Register', _data).subscribe(resp => {
        }, error => () => {
          console.log(error); }, () => {
          });
    } else {
        return false;
    }
  }

这是我的 api 服务代码。

public postCall<T>(apiUrl: any, itemName: any): Observable<T> {
    const _options = { headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + localStorage.getItem('access_token')
      }
    )};
      return this.http.post<T>(this.actionUrl + apiUrl, itemName, _options);
  }

这是我传递的 json。当我通过邮递员运行这个 json 时，它命中了 api。但我不明白为什么它没有从角度应用程序中击中它。

"{"FirstName":"Kamran","LastName":"Khan","Email":"kamrankhan473@gmail.com","UserName":"kamrankhan","Password":"Kamran@786","ConfirmPassword":"Kamran@786"}"

我使用邮递员测试的 api 没有问题，它运行良好。

【问题讨论】：

如果它没有像您声称的那样命中 api（= 在 Network devtools 中也没有看到任何请求？），然后检查 registerUsermethod 是否被调用，如果确实如此 - 是表格实际上有效吗？（顺便说一句，你似乎也多余地重置了 this.confirmPasswordMessage 消息）
1.不相关，您为什么要使用JSON.stringify() 将数据转换为字符串并提及'Content-Type': 'application/json'？数据应该在没有转换的情况下发送：this._apiService.postCall('Account/Register', this._registerModel).
我认为你不需要 JSON.stringify 你的数据来进行 http.post() 调用
我也试过这个，不是对模型进行筛选，但仍然没有响应。
apiUrl 给了我这个链接，localhost:20863

标签： angular angular-http

【解决方案1】：

我发现了多个问题。

删除if 条件中的return false。它在发出 HTTP 请求之前从函数返回。
else 块是冗余的。无论if 语句是否为真，该函数都将返回任一方式。
删除JSON.stringify()。您需要发送 JSON，而不是字符串。
在 URL 中添加前导斜杠。将'Account/Register' 替换为'/Account/Register'。
错误回调函数定义中的问题。这里error 是函数的参数。不能定义error => () => {} 形式的函数。
服务函数中的泛型类型变量<T>是多余的。此处未使用。

试试下面的

组件

registerUser() {
  this.confirmPasswordMessage = false;
  if (this.registerForm.valid) {
    this.confirmPasswordMessage = false;
    if (this._registerModel.Password.trim() !== this._registerModel.ConfirmPassword.trim()) {
      this.confirmPasswordMessage = true;
      this._progressBar.done();
      // no `return false;` here
    }
    this._apiService.postCall('/Account/Register', this._registerModel).subscribe(
      resp => { console.log(resp); }, 
      error => { console.log(error); }, 
      () => { console.log('complete'); }
    );
  }
}

服务

public postCall(apiUrl: any, itemName: any): Observable<any> {
  const _options = { 
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + localStorage.getItem('access_token');
    }
  )};
  return this.http.post(this.actionUrl + apiUrl, itemName, _options);
}

如果您从 Angular 开始，我建议您先通过 Angular tutorial。它介绍了 Angular 的基本概念。

【讨论】：