如何使用来自@ angular / http的http发送帖子请求 [英] how to send post request using http from @angular/http

问题描述

我使用以下代码发送帖子请求

I am using following code to send a post request

import { Http, Headers, Response } from '@angular/http';

@Injectable()
export class AuthenticationService {
    private _options = new Headers({'Content-Type': 'application/json'});
    
    constructor(private http: Http) { }

    login(username: string, password: string) {
           return this.http.post('http://localhost:56451/map',
              { "username": username, "password": password },
              this._options);
    }
}

但是我在vscode中遇到以下错误

however I am getting following error in vscode

Argument of type '{ headers: HttpHeaders; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types 
 of property 'headers' are incompatible. Type 'HttpHeaders' is not assignable to type 'Headers'. Property 'forEach' 
 is missing in type 'HttpHeaders'.

请帮助澄清相关概念

推荐答案

您正在混合类： HttpHeaders 与 HttpClient 一起使用，替换 Http 自4.3。

You are mixing classes: HttpHeaders goes with HttpClient, which replaces Http since 4.3.

关于403的其他评论值得研究，但至少，这样做：

The other comments about 403 are worth investigating, but at a minimum, do this:

import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'

@Injectable()
export class AuthenticationService {
    private _options = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };

    // Inject HttpClient, not Http
    constructor(private http: HttpClient) { }

    login(username: string, password: string) {
           return this.http.post('http://localhost:56451/map',
              { username, password },
              this._options);
    }
}

请注意，您可以使用解构分配（当您的对象键名称为与用它替换它的变量名相同。

Note that you can use a destructuring assignment in the post body (when your object key name is the same as the variable name you are replacing it with).

这篇关于如何使用来自@ angular / http的http发送帖子请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！