Angular 12中如何自定义调用Azure Table Storage REST API MERGE方法

Angular的HttpClient虽然没有提供MERGE请求的专属快捷调用方法，但可以通过通用请求接口直接自定义请求方法，无需复杂的扩展操作，具体实现方式如下：

方案1：直接使用通用request方法（推荐） #

HttpClient的底层request方法支持传入任意自定义HTTP方法，直接传入'MERGE'作为方法参数即可，示例代码如下：

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

@Injectable({
  providedIn: 'root'
})
export class TableStorageService {
  constructor(private http: HttpClient) {}

  mergeEntity(partitionKey: string, rowKey: string, updateData: any) {
    const baseUrl = 'https://myaccount.table.core.windows.net/mytable';
    const requestUrl = `${baseUrl}(PartitionKey='${partitionKey}', RowKey='${rowKey}')`;

    // 配置请求头，需根据Azure要求补充认证信息（如SAS令牌、SharedKey签名等）
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      // 如果不需要强制匹配ETag可以填*
      'If-Match': '*'
    });

    // 直接调用通用request方法，第一个参数传入自定义的MERGE方法
    return this.http.request('MERGE', requestUrl, {
      body: updateData,
      headers: headers
      // 如需在URL中携带SAS令牌可以加params参数
    });
  }
}

方案2：封装自定义快捷方法（可选） #

如果需要频繁调用MERGE请求，可以对HttpClient做简单封装，添加专属的merge快捷方法：

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CustomHttpService {
  constructor(private http: HttpClient) {}

  merge<T>(
    url: string,
    body: any | null,
    options?: {
      headers?: HttpHeaders | { [header: string]: string | string[] };
      params?: HttpParams | { [param: string]: string | number | boolean | ReadonlyArray<string | number | boolean> };
      responseType?: 'json' | 'text' | 'blob' | 'arraybuffer';
    }
  ): Observable<T> {
    return this.http.request<T>('MERGE', url, {
      body: body,
      ...options
    });
  }
}

注意事项 #

• 前端直接调用Azure Table Storage接口时，需要先在Azure存储账户的CORS配置中允许MERGE请求方法，同时配置允许的来源、请求头和响应头
• 建议使用SAS令牌做认证，不要在前端代码中暴露存储账户的访问密钥

内容的提问来源于stack exchange，提问作者Ping Chiang