Angularjs 使用 HTTP Post 傳送資料

Oluwafisayo Oluwatayo 2023年1月30日 2022年4月20日
  1. 在 Angular 中使用響應型別 <any> 向 API 釋出請求
  2. 在 Angular 中釋出具有預期響應的請求
Angularjs 使用 HTTP Post 傳送資料

在深入探討本主題的真正要點之前,讓我們先了解一下 http.post() 在 Angular 中的作用。當你想到 Google 時,我們在搜尋時收到的搜尋結果會使用 post 方法傳送到伺服器,當使用者在 Google 上發起搜尋時,會呼叫 get 方法。

所以在 Angular 中使用 http.post() 在伺服器上儲存資料。將停止此資料的伺服器將具有一個 URL。

當程式設計師第一次遇到 $http.post() 時,尤其是有 jQuery 知識的人,第一反應是用 $http.post() 替換 $jQuery.post(),但這不起作用,因為 Angular 以不同的方式傳輸資料。

$http.post() 函式未正確應用時,將呼叫將要傳送的 URL 資料,但不傳送任何資料。讓我們繼續看看正確應用 HTTP Post 功能的不同方法。

在 Angular 中使用響應型別 <any> 向 API 釋出請求

第一個示例將要求我們請求一個 URL,該 URL 返回分配給 Jason 的 id。響應型別是 <any>,因此它處理作為響應返回的任何屬性。

我們有一個非常簡單的 html 來設定。

<div>
  <h1>Angularjs HTTP POST</h1>
  <div>Post Id: {{ postId }}</div>
</div>

然後我們移動到 app.component.ts,我們將在其中匯入 HttpClient,它將 HTTP 請求傳送到 Angular。然後我們使用相同的 HttpClient 作為建構函式。

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

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
  postId;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .post<any>('https://reqres.in/api/users', {
        name: 'Jason',
      })
      .subscribe((data) => {
        this.postId = data.id;
      });
  }
}

最後我們前往 app.module.ts。在這裡,我們將 HttpClientModule 匯入到 Angular 中:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

如果一切按說明進行,你應該會看到 Post id,其中生成了三個數字。

在 Angular 中釋出具有預期響應的請求

這種方法使使用者可以更好地控制我們從 URL 獲得的響應,因為我們可以分配我們想要獲取的資料。我們將為此任務呼叫 interface Article 函式。

我們只對 app.component.ts 進行了微小的更改,我們將 <any> 替換為 <Article> 並在其下方建立 Article 函式。

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

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
  postId;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .post<Article>('https://reqres.in/api/users', {
        name: 'Jason',
      })
      .subscribe((data) => {
        this.postId = data.name;
      });
  }
}
interface Article {
id: number;
name: string;
}

HTTP 不是將 id 作為響應返回,而是分配給 id 的名稱就是我們得到的。

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn