Angular - 刪除

上一個
下一個

HttpClient delete() 方法

要刪除伺服器中的資源，可以使用 HTTP 動詞 delete。delete 動詞的目的是刪除伺服器中的特定資源。

Angular HttpClient 提供了一個方法 delete()，可以使用 delete HTTP 動詞刪除伺服器中給定的資源。讓我們在本節中學習 HttpClient delete() 方法。

delete() 方法的簽名

delete() 方法的簽名如下：

delete(<url as string>, <options as object>)

  • URL 表示要刪除的伺服器中資源的 URI。

  • options 表示要與資源 URL 一起傳送的選項。

選項

可用的選項如下：

  • observe
  • responseType
  • headers
  • params
  • context
  • reportProgress
  • withCredentials
  • transferCache

observe

observe 用於指定在伺服器通訊期間要觀察響應的哪一部分。根據 observe 選項，將返回整個響應或部分響應作為 Observable。可能的值為 body、events 和 response。

response 用於將 HTTP 請求的完整響應作為 Observable<HttpResponse<R>> 返回，其中 R 基於 requestType 選項（我們將在下一節中檢查）和請求的資料型別 (Expense)。HttpResponse 類的目的是表示來自伺服器的完整 HTTP 響應。

this.http.delete<Expense>(<url>, { 'observe': 'response', 'responseType' : 'json' })

這裡，

  • json 是用於解釋響應體的格式

  • Expense 是用於格式化響應體並返回 Observable<HttpResponse<Expense>> 的請求型別

events 用於返回響應流中觸發的事件以及相應的響應體作為 Observable<HttpEvent>，其中 R 基於 requestType 選項和請求的資料型別 (Expense)。

this.http.delete<Expense>(<url>, { 'observe': 'events', 'responseType' : 'json' })

這裡，

  • json 是用於解釋響應體的格式

  • Expense 是用於格式化響應體並返回 Observable<HttpEvent<Expense>> 的請求型別

body 用於僅返回 HTTP 請求的響應體內容作為 Observable，其中 R 基於 requestType 選項和請求的資料型別 (Expense)。

this.http.delete<Expense>(<url>, { 'observe': 'body', 'responseType' : 'json' })

這裡，

  • json 是用於解釋響應體的格式

  • Expense 是用於格式化響應體並返回 Observable<Expense> 的請求型別

responseType

responseType 用於解釋響應體。它可以有四個可能的值，如下所示：

  • arraybuffer
  • blob
  • text
  • json

讓我們逐一瞭解這些選項

arraybuffer 用於將響應體解釋為通用原始二進位制資料緩衝區並返回 `Observable。它可用於流式傳輸音訊/影片內容。

this.http.delete(<url>, { 'observe': 'body', 'responseType' : 'arraybuffer' } )

blob 用於將響應體解釋為二進位制格式並返回 Observable<blob>。它可用於下載大檔案。

this.http.delete(<url>, { 'observe': 'body', 'responseType' : 'blob' })

text 用於將響應體解釋為純文字格式並返回 Observable<String>。它可用於表示基於文字的資料。

this.http.delete(<url>, { 'observe': 'body', 'responseType' : 'json' })

json 用於將響應體解釋為 json 格式並返回 Observable<R>，其中 R 是請求的資料型別 (Expense)。它可用於以 json 格式表示結果。透過在方法中指定型別變數 (R) 可以進一步將其編碼為任何型別，如下所示：

this.http.delete<Expense>(<url>, { 'observe': 'body', 'responseType' : 'json' })

根據 observe 和 responseType，Httpclient 將返回具有不同型別變數的 Observable。讓我們檢查 observe 和 responseType 的一些組合以更好地理解這個概念。

  • observe => body 和 responseType => json

    返回 Observable。R 表示型別變數。

  • observe => response 和 responseType => json

    返回 Observable<HttpResponse>。R 表示型別變數並編碼響應體。

  • observe => events 和 responseType => json

    返回 Observable<HttpEvent>。R 表示型別變數並編碼響應體。

  • observe => events 和 responseType => arraybuffer

    返回 Observable<HttpEvent>。響應體被編碼為 ArrayBuffer。

  • observe => response 和 responseType => blob

    返回 Observable<HttpEvent>。響應體被編碼為 ArrayBuffer。

  • observe => response 和 responseType => text

    返回 Observable<HttpResponse>。響應體被編碼為 ArrayBuffer。

我們可以根據需要組合 observe 和 responseType 來建立更多組合。

headers

headers 用於指定 HTTP 標頭。它可以包含標準 http 標頭作為鍵/值對，也可以在 HttpHeaders 類中編碼資料。一個作為鍵/值對的示例標頭如下：

{ 'Content-type': 'application/json' }

它指定請求內容型別為 json。我們還可以使用 Angular 提供的 HttpHeaders 類來建立 http 標頭。使用 HttpHeaders 的示例標頭集如下：

// create header using `HttpHeaders`
const headers = new HttpHeaders()
   .set('content-type', 'application/json')
   .set('Access-Control-Allow-Origin', '*');

this.http.delete<Expense>(<url>, 
   { 'observe': 'body', 'responseType' : 'json', headers: headers })

params

params 用於以 application/x-www-form-urlencoded 格式表示序列化請求引數。它可以包含作為鍵/值對的引數，也可以在 HttpParams 類中編碼資料。一個作為鍵/值對的示例引數如下：

{ 'name': 'john' }

它指定請求引數鍵為 name，其值為 john。我們還可以使用 Angular 提供的 HttpParams 類來建立引數。使用 HttpParams 的示例引數集如下：

// create parameters using `HttpParams`
const params = new HttpParams()
   .set('name', 'john')
   .set('age', 25)
   .set('active', true;

this.http.delete<Expense>(<url>, 
   { 'observe': 'body', 'responseType' : 'json', params: params })

context

context 用於以型別安全的方式傳送任意值作為鍵/值對，並且沒有鍵衝突。它用作攔截器的資訊來源，充當客戶端和伺服器之間的中介軟體。Angular 提供了一個特殊的類 HttpContext 來編碼上下文資訊。一個示例上下文如下：

// create a key using HttpContextToken
export const IS_AUTH_ENABLED = new HttpContextToken<boolean>(() => false);

// set data for the context
let authContext = new HttpContext().set(IS_AUTH_ENABLED, true)

this.http.request<Expense>('GET', <url>, 
   { 'observe': 'body', 'responseType' : 'json', context: authContext })

這裡，

  • HttpContextToken 用於建立鍵以及值型別。

  • IS_AUTH_ENABLED 是鍵，其型別為布林值

reportProgress

reportProgress 用於指定是否將伺服器傳送回請求（通訊）的進度。它可用於顯示透過 Web API 上傳大檔案的進度。

this.http.delete<Expense>(<url>, 
   { 'observe': 'events', 'responseType' : 'json', reportProgress: true })

withCredentials

withCredentials 用於指定是否應將請求與傳出憑據（cookie）一起傳送。它接受布林值。

this.http.delete<Expense>(<url>, 
   { 'observe': 'body', 'responseType' : 'json', withCredentials: true })

transferCache

transferCache 用於指定是否應快取請求。它接受布林值或 HttpTransferCacheOptions 值。HttpTransferCacheOptions 用於編碼動態邏輯，以根據自定義過濾器函式過濾要快取的請求並覆蓋預設快取行為。

this.http.delete<Expense>(<url>, 
   { 'observe': 'body', 'responseType' : 'json', transferCache: true })

工作示例

要完成 HTTP 客戶端-伺服器通訊，我們需要設定一個 Web 應用程式，並且需要公開一組 Web API。可以從客戶端請求 Web API。讓我們建立一個示例伺服器應用程式 Expense API App，為費用提供 CRUD REST API（主要是 DELETE 方法）。

步驟 1：轉到您喜歡的 workspace，如下所示：

cd /go/to/your/favorite/workspace

步驟 2：建立一個新資料夾 expense-rest-api 並移動到該資料夾

mkdir expense-rest-api && cd expense-rest-api

步驟 3：使用 npm 命令提供的 init 子命令建立一個新應用程式，如下所示：

npm init

以上命令會詢問一些問題，並使用預設答案回答所有問題。

步驟 4：安裝 express 和 cors 包以建立基於節點的 Web 應用程式。

npm install express cors --save

步驟 5：安裝 sqlite 包以將費用儲存在基於 sqlite 的資料庫中

npm install sqlite3 --save

步驟 6：建立一個新檔案 sqlitedb.js 並新增以下程式碼以使用費用表和示例費用條目初始化資料庫。費用表將用於儲存費用專案

var sqlite3 = require('sqlite3').verbose()
const DBSOURCE = "expensedb.sqlite"

let db = new sqlite3.Database(DBSOURCE, (err) => {
   if (err) {
      console.error(err.message)
      throw err
   }else{
      console.log('Connected to the SQLite database.')
      db.run(`CREATE TABLE IF NOT EXISTS expense (
         id INTEGER PRIMARY KEY AUTOINCREMENT,
         item text, 
         amount real, 
         category text, 
         location text, 
         spendOn text, 
         createdOn text 
      )`,
         (err) => {
            if (err) {
               console.log(err);
            }else{
               var insert = 'INSERT INTO expense (item, amount, category, location, spendOn, createdOn) VALUES (?,?,?,?,?,?)'
         
               db.run(insert, ['Pizza', 10, 'Food', 'KFC', '2020-05-26 10:10', '2020-05-26 10:10'])
               db.run(insert, ['Pizza', 9, 'Food', 'Mcdonald', '2020-05-28 11:10', '2020-05-28 11:10'])
               db.run(insert, ['Pizza', 12, 'Food', 'Mcdonald', '2020-05-29 09:22', '2020-05-29 09:22'])
               db.run(insert, ['Pizza', 15, 'Food', 'KFC', '2020-06-06 16:18', '2020-06-06 16:18'])
               db.run(insert, ['Pizza', 14, 'Food', 'Mcdonald', '2020-06-01 18:14', '2020-05-01 18:14'])
            }
         }
      );  
   }
});

module.exports = db

步驟 7：開啟 index.js 並更新以下程式碼，

var express = require("express")
var cors = require('cors')
var db = require("./sqlitedb.js")

var app = express()
app.use(cors());

var bodyParser = require("body-parser");
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

var HTTP_PORT = 8000
app.listen(HTTP_PORT, () => {
   console.log("Server running on port %PORT%".replace("%PORT%", HTTP_PORT))
});

app.get("/", (req, res, next) => {
   res.json({ "message": "Ok" })
});

app.get("/api/expense", (req, res, next) => {
   var sql = "select * from expense"
   var params = []
   db.all(sql, params, (err, rows) => {
   if (err) {
      res.status(400).json({ "error": err.message });
      return;
   }
   res.json(rows)
   });
   
});

app.get("/api/expense/:id", (req, res, next) => {
   var sql = "select * from expense where id = ?"
   var params = [req.params.id]
   db.get(sql, params, (err, row) => {
   if (err) {
      res.status(400).json({ "error": err.message });
      return;
   }
   res.json(row)
   });
});

app.use(function (req, res) {
   res.status(404);
});

這裡，程式碼將建立以下六個提到的 REST API 端點

  • / 端點返回 OK 訊息以確保應用程式正常工作

  • /api/expense 端點返回資料庫中所有可用的費用專案

  • /api/expense/:id 端點根據費用條目 ID 返回費用條目

  • /api/expense/:id 端點使用 delete 動詞將根據費用條目 ID 刪除費用條目

步驟 8：執行應用程式，如下所示：

node index.js

步驟 9：要測試應用程式並確保其正常工作，請開啟瀏覽器並轉到 https://:8000/。如果應用程式正常工作，它應該返回以下訊息。

{ 
   "message": "Ok" 
}

讓我們建立一個有效的 Angular 示例，以使用 HttpClient 服務類刪除伺服器中現有的費用。

步驟 10：透過執行 ng new 命令建立一個新的 Angular 應用程式，如下所示：

ng new my-http-app

啟用 Angular 路由和 CSS，如下所示：

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

步驟 11：透過在模組配置檔案 (app.module.ts) 中匯入 HttpClientModule 來啟用應用程式中的 http 通訊。

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

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

這裡，

  • 從 @angular/common/http 模組匯入 HttpClientModule。

  • 將 HttpClientModule 新增到 @NgModule 配置的 imports 部分。

步驟 12：建立一個新的介面 Expense 來表示我們的費用專案。

interface Expense {
   id?: Number,
   item: String,
   amount: Number,
   category: String,
   location: String,
   spendOn: Date
}

export default Expense;

這裡，

  • id 設定為可選屬性

步驟 13：建立新的元件 ListExpenses 以顯示來自伺服器的費用專案。

ng generate component ListExpenses

它將建立如下所示的元件：

CREATE src/app/list-expenses/list-expenses.component.css (0 bytes)
CREATE src/app/list-expenses/list-expenses.component.html (28 bytes)
CREATE src/app/list-expenses/list-expenses.component.spec.ts (602 bytes)
CREATE src/app/list-expenses/list-expenses.component.ts (229 bytes)
UPDATE src/app/app.module.ts (581 bytes)

步驟 14：將我們的新元件包含到 App 根元件的檢視 app.component.html 中，如下所示：

<app-list-expenses></app-list-expenses>

<router-outlet></router-outlet>

步驟 15：透過建構函式將 HttpClient 注入到 ListExpenses 元件中，如下所示：

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

@Component({
   selector: 'app-list-expenses',
   templateUrl: './list-expenses.component.html',
   styleUrls: ['./list-expenses.component.css']
})
export class ListExpensesComponent {

   constructor(private http: HttpClient) { }
}

步驟 16：實現 OnInit 生命週期鉤子，以便在 ListExpenses 元件初始化後向伺服器請求費用。

export class ListExpensesComponent implements OnInit{
   constructor(private http: HttpClient) { }   
   ngOnInit(): void {
   }
}

步驟 17：建立一個區域性變數 expenses 來儲存來自伺服器的費用。

export class ListExpensesComponent implements OnInit{
   expenses: Expense[] = [];   
   constructor(private http: HttpClient) { }   
   ngOnInit(): void {   
   }
}

步驟18：建立一個本地變數 expense，用於儲存伺服器建立的新支出。

export class ListExpensesComponent implements OnInit{
   expenses: Expense[] = [];
   newexpense: Expense | null = null;   
   constructor(private http: HttpClient) { }   
   ngOnInit(): void {   
   }
}

步驟19：透過傳遞支出列表 URL 和選項，呼叫 this.http（HttpClient 例項）物件的 get 方法，從伺服器獲取支出物件。然後，將支出設定到我們的本地變數 expenses 中。

export class ListExpensesComponent implements OnInit {
   expenses: Expense[] = [];
   newexpense: Expense | null = null;   
   constructor(private http: HttpClient) { }   
   ngOnInit(): void {
   
      this.http.get<Expense[]>('https://:8000/api/expense',
         {
            'observe': 'body',
            'responseType': 'json'
         })
         .subscribe( data => {
            this.expenses = data as Expense[]
            console.log(this.expenses)
         })
   
   }
}

這裡，

  • 將 Expense[] 設定為伺服器返回的物件的型別。伺服器將在其主體中以 JSON 格式傳送支出物件陣列以及新的支出物件。

  • 訂閱請求（this.http.get）物件。然後將訂閱的資料解析為支出物件的陣列，並將其設定為本地支出變數（this.expenses）。

步驟20：新增一個新的 delete 方法，並透過傳遞刪除 URL 呼叫 this.http（HttpClient 例項）物件的 delete() 方法。

export class ListExpensesComponent implements OnInit {
   expenses: Expense[] = [];
   newexpense: Expense | null = null;
   
   constructor(private http: HttpClient) { }   
   delete(id? : Number) : void {
      if (id) {
         this.http.delete<Expense>('https://:8000/api/expense/' + id,{
            'observe': 'body',
            'responseType': 'json'
         })
            .subscribe( data => {
               console.log(data)
                  this.http.get<Expense[]>('https://:8000/api/expense',{
                     'observe': 'body',
                     'responseType': 'json'
                  })
                  .subscribe( data => {
                     this.expenses = data as Expense[]
                     console.log(this.expenses)
                  })
            });
      }
   }   
   ngOnInit(): void {
   
      this.http.get<Expense[]>('https://:8000/api/expense',{
         'observe': 'body',
         'responseType': 'json'
      })
      .subscribe( data => {
         this.expenses = data as Expense[]
         console.log(this.expenses)
      })
   
   }
}

步驟21：接下來，獲取支出列表物件，並在我們的元件模板頁面（list-expenses.component.html）中渲染它。此外，為每個支出新增錨標記，並透過傳遞相應的支出 ID 設定刪除方法。

<div><h3>Expenses</h3></div>
<ul>
   <li *ngFor="let expense of expenses">
      {{expense.item}} @ {{expense.location}} for {{expense.amount}} USD on {{expense.spendOn | date:'shortDate' }} <a href="delete(expense.id)">delete</a>
   </li>
</ul>

這裡，

  • 當用戶點選刪除連結時，它將呼叫刪除支出端點，並從伺服器刪除支出。

步驟22：ListExpensesComponent 的完整程式碼如下所示：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpRequest, HttpResponse, HttpEvent, HttpParams } from '@angular/common/http';
import Expense from '../Expense';

@Component({
  selector: 'app-list-expenses',
  templateUrl: './list-expenses.component.html',
  styleUrls: ['./list-expenses.component.css']
})
export class ListExpensesComponent implements OnInit {

   expenses: Expense[] = [];
   newexpense: Expense | null = null;
   
   constructor(private http: HttpClient) { }
   
   ngOnInit(): void {
   
   var spend_date = new Date();
   spend_date.setDate(spend_date.getDate() - 1);
   this.newexpense = {
      'item': 'new item ' + Math.floor(Math.random() * 10),
      'amount': Math.floor(Math.random() * 100),
      'category': 'Food',
      'location': 'KFC',
      'spendOn': spend_date
   }
   
   this.http.delete<Expense>('https://:8000/api/expense/1',
      this.newexpense,{
         'observe': 'body',
         'responseType': 'json'
      })
      .subscribe( data => {
         this.newexpense = data as Expense;
         console.log(data)
      });   
      this.http.get<Expense[]>('https://:8000/api/expense',{
         'observe': 'body',
         'responseType': 'json'
      })
      .subscribe( data => {
         this.expenses = data as Expense[]
         console.log(this.expenses)
      })
   
   }
}

步驟23：最後，使用以下命令執行應用程式：

ng serve

步驟24：開啟瀏覽器並導航到 https://:4200/ URL，並檢查輸出。

這裡，輸出顯示我們的支出作為一個專案列表，除了專案 1。

結論

Angular 提供了一種簡單的方法，可以透過 HttpClient 物件將資料傳送到伺服器。delete() 是一個用於將資料傳送到伺服器的特定方法。我們將在後續章節中學習更多 http 方法，以針對其他 http 動詞。

列印頁面
上一頁
下一頁
廣告