Http (ajax) Post data 問題

General
1

以前ng1會用 $httpParamSerializerJQLike 來處理要 post 的資料(json)，
到了ng2/3, 要用 URLSearchParams，是要一個個 variable 的 set 入去，
請問除了自己起個 loop function外，有沒有其他方法？

另外，我見到網上大部份例子都使用簡單的method1，
可是我用 codeigniter rest api 架 api 只有處理 POST, 沒有OPTION (return 405)
是否 API 那邊設定得不好？

//NG1
var param = {
  email: 'aa@aa.com',
  password: '1234'
};
$http({
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  ,method: 'POST'
  ,url: 'https://a.com/login'
  ,data: $httpParamSerializerJQLike(param)
  ,timeout: 10000
  ,responseType: 'json'
}).then(function successCallback(response) {
  //success
}}, function errorCallback(response) {
  //fail
});
}

//NG3
public login_method1():void {
        const API_URL:string = 'https://a.com/login';
        var param = {
          email: 'aa@aa.com',
          password: '1234'
        };
        
        this.http.post(API_URL, param)
            .map(res => res.json())
            .subscribe(data => {
                //ng changed into OPTION requests, server return status 405 return
            }, error => {
                console.log("Oooops!");
            });
    }
    
    
public login_method2():void {
  const API_URL:string = 'https://a.com/login';
  const API_HEADERS = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
  const API_OPTIONS = new RequestOptions({ headers: API_HEADERS});

  let param = new URLSearchParams();
  param.set('email', "aa@aa.com");
  param.set('password', "1234");

  this.http.post(API_URL, param, API_OPTIONS)
    .map(res => res.json())
    .subscribe(data => {
    // RETURN SUCCESS
  }, error => {
    console.log("Oooops!");
  });
}
2

Quick Question, 既然你都使用 post 了，為什麼還要把 data 轉換成 URLSearchParams, 有什麼特別的原因嗎?
URLSearchParams, 好像沒有丟進去直接轉換的功能吧。我也不確定

3

FYI,
Angular在執行 http.post 時，如果有出現 options 的呼叫，那是因為 CORS 的關係，既有的 post 還是會執行，
所以從瀏覽器的開發者工具-Network, 你會看到2次的request.

FYI:

4

URLSearchParams 就是把 json 轉成
email=aa@aa.com&password=1234

不轉的話，是一個 json string.

5

某些後端架構在寫API時不好接JSON檔案，所以還是會用URLSearchParams，這個問題我有遇過。目前是沒有想到其他比較好的方法，就簡單寫一隻函數作轉換：

function generateBody(body: object): string {
      const result = new URLSearchParams();
      Object.keys(body).forEach(key => result.set(key, body[key]));
      return result.toString();
}
2個讚
6

原來 ionic 3 有 build in API proxy，加左就用倒最簡單果個方法了，謝！