如何使用来自@angular/http 的http 发送post 请求

2022-01-17 00:00:00 http-headers http post javascript angular

我正在使用以下代码发送一个帖子请求

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).

相关文章