Tyring 从 '@angular/common/http' 导入 import { HttpClient, Headers, RequestOptions };答案

【问题标题】：Tyring to import import { HttpClient, Headers, RequestOptions } from '@angular/common/http';Tyring 从 '@angular/common/http' 导入 import { HttpClient, Headers, RequestOptions };
【发布时间】：2019-10-17 22:04:17
【问题描述】：

我正在使用 ionic 4 项目。现在我正在尝试发布一个 http 帖子并在此链接上关注 tut：https://www.techiediaries.com/ionic-http-post/。现在是说他在@angular/common/http'中找不到Headers、RequestOptions；

我尝试了在堆栈溢出时发现的不同的东西。

import { Component, OnInit } from '@angular/core';
import { HttpClient, Headers, RequestOptions } from 
'@angular/common/http';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

constructor(public httpClient: HttpClient) {
 }
 ngOnInit(){}

  sendPostRequest() {
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
const requestOptions = new RequestOptions({ headers: headers });

let postData = {
        "name": "Customer004",
        "email": "customer004@email.com",
        "tel": "0000252525"
}

this.http.post("http://127.0.0.1:3000/customers", postData, requestOptions)
  .subscribe(data => {
    console.log(data['_body']);
   }, error => {
    console.log(error);
  });
  }

【问题讨论】：

问题来自您的 Angular 版本。 Headers 在 Angular 6+ 中已重命名为 HttpHeaders。 @angular/common/http documentation。您使用的是哪个版本的 Angular？
angular.io/guide/deprecations

标签： angular ionic-framework

【解决方案1】：

你好试试这个头文件使用 HttpHeaders:

import { HttpClient, HttpHeaders , RequestOptions } from '@angular/common/http';

【讨论】：

【解决方案2】：

Angular 5 Onward，如果您只想在JSON 中通信，则不需要将Content-Type 设置为application/json。它将默认以JSON 格式进行通信。

所以你可以把它当作

用于 GET 调用

this.http.get('YOUR API').subscribe((response) => {
    console.log(response);
});

用于 POST 调用

this.http.post('YOUR API', `{JSON OBJECT}`).subscribe((response) => {
    console.log(response);
});

您还可以添加自定义标头，例如授权令牌，如下所示

import { HttpClient, HttpHeaders } from '@angular/common/http';

requestHeaders = new HttpHeaders().set('Authorization', 'Token');

并如下使用它

用于 GET 调用

this.http.get('YOUR API', {headers: this.requestHeaders}).subscribe((response) => {
    console.log(response);
});

用于 POST 调用

this.http.post('YOUR API', `{JSON OBJECT}`, {headers: this.requestHeaders}).subscribe((response) => {
    console.log(response);
});

HttpHeaders包括set()、append()等方法

【讨论】：

【解决方案3】：

这就是我们如何添加标题

  import { HttpHeaders } from '@angular/common/http';


    let yourheaders = new HttpHeaders({
    'Content-Type': 'application/json'
    });

    let youroptions = {
    headers: yourheaders
    }

看看this 看this also

【讨论】：

嗨，标题部分现在已修复，谢谢。但我仍然收到在@angular/common/http 中找不到RequestOptions 的错误？

【解决方案4】：

保持简单：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { 
}

获取 API：

this.http.get('https://someapi.com/posts').subscribe((response) => {
    console.log(response);
});

发布 API：

    let YourHeaders = {'Content-Type':'application/json'};
    this.http.post(url, YourData, {headers: YourHeaders})
      .subscribe(data => {
      console.log(data)
    },
    (error) => {
            console.log("Error" + error)
    })

【讨论】：