如何為Angular的$http請求編寫transformRequest函數

一、什麼是transformRequest函數

在Angular的$http服務中，發送HTTP請求時可以通過transformRequest屬性來指定一個轉換函數。該函數會在請求發送到服務器之前執行，用於對原始請求進行處理和轉換。transformRequest函數需要返迴轉換後的請求數據，可以是字符串或者對象。

$http({
  method: 'POST',
  url: '/api/users',
  transformRequest: function(data, headersGetter) {
    var transformedData = /* 轉換操作 */;
    return transformedData;
  },
  data: {
    name: 'John',
    email: 'john@example.com'
  }
});

二、為什麼需要transformRequest函數

HTTP請求中發送的原始數據可能需要進行一些格式上的轉換，比如將對象轉換成JSON字符串、將表單數據序列化成URL編碼的字符串等。此外，對於一些特殊的請求操作，比如文件上傳，需要手動構造請求數據格式。

通過transformRequest函數，可以在發送請求之前對請求數據進行處理，靈活地適應各種請求需求。

三、transformRequest函數示例

以下是一個對請求數據進行JSON格式轉換的transformRequest函數示例：

$http({
  method: 'POST',
  url: '/api/users',
  transformRequest: function(data, headersGetter) {
    return JSON.stringify(data);
  },
  data: {
    name: 'John',
    email: 'john@example.com'
  },
  headers: {
    'Content-Type': 'application/json'
  }
});

該函數將請求數據轉換成JSON字符串，並且設置Content-Type請求頭為application/json。使用該函數發送的請求數據如下：

{
  "name": "John",
  "email": "john@example.com"
}

四、transformRequest函數中的常用操作

1. 對象轉換成表單數據格式

以下是一個將對象轉換成URL編碼的表單數據格式的transformRequest函數示例：

$http({
  method: 'POST',
  url: '/api/users',
  transformRequest: function(data, headersGetter) {
    var formData = new FormData();
    for (var key in data) {
      formData.append(key, data[key]);
    }
    return formData;
  },
  data: {
    name: 'John',
    email: 'john@example.com'
  },
  headers: {
    'Content-Type': undefined // IMPORTANT: 設置成undefined才會自動設置Content-Type為multipart/form-data
  }
});

該函數使用FormData對象將請求數據序列化成表單數據格式，並且設置Content-Type請求頭為multipart/form-data。發送的請求數據如下：

------WebKitFormBoundaryWA8s57e1wfwlyBNs
Content-Disposition: form-data; name="name"

John
------WebKitFormBoundaryWA8s57e1wfwlyBNs
Content-Disposition: form-data; name="email"

john@example.com
------WebKitFormBoundaryWA8s57e1wfwlyBNs--

2. 對象轉換成XML格式

以下是一個將對象轉換成XML格式的transformRequest函數示例：

$http({
  method: 'POST',
  url: '/api/users',
  transformRequest: function(data, headersGetter) {
    var xmlData = '';
    for (var key in data) {
      xmlData += '' + data[key] + '';
    }
    xmlData += '';
    return xmlData;
  },
  data: {
    name: 'John',
    email: 'john@example.com'
  },
  headers: {
    'Content-Type': 'application/xml'
  }
});

該函數使用字符串拼接方式將請求數據序列化成XML格式，並且設置Content-Type請求頭為application/xml。發送的請求數據如下：

  John
  john@example.com

3. 對請求頭進行處理

以下是一個給每個請求添加Authorization請求頭的transformRequest函數示例：

$http({
  method: 'POST',
  url: '/api/users',
  transformRequest: function(data, headersGetter) {
    var headers = headersGetter();
    headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return data;
  },
  data: {
    name: 'John',
    email: 'john@example.com'
  }
});

該函數通過headersGetter函數獲取當前請求的請求頭，並且添加Authorization請求頭。使用該函數發送的請求頭如下：

{
  'Content-Type': 'application/json',
  'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiZW1haWwiOiJqb2huQGV4YW1wbGUuY29tIiwiaWF0IjoxNTE2MjM5MDIyfQ.i3-22vByd_AkQOwW8-kG20lQC-wJZhM9pzVhh8gGavo'
}

五、總結

transformRequest函數是Angular $http服務中用來對請求數據進行處理和轉換的重要函數。通過transformRequest函數，我們可以適應各種特殊的請求需求，比如數據格式轉換、請求頭處理等。