$.ajax에서 $http로 갈아 타서 깨달았다.

동기

AngularJS로 애플리케이션을 빌드하고 있음에도 불구하고,
HTTP 요청을 jQuery에 의존하고 있었던 저이지만,
몇번이나 팀 멤버로부터의 서리가 시선을 느꼈기 때문에,
$http로 갈아타려고 결심했습니다.

우선 $.ajax 코드를 확인해 봅시다.

network.js

let queries = {
    "name": "Donald John Trump",
    "birthday": "1946-06-14",
    "money": NaN
}

$.ajax({
    type: "POST",
    url: "https://example.com/api/action",
    data: queries,
    dataType: "json",
    success: function (response, status, xhr) {
        //成功
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        //失敗
    }
});

그래, 실로 간단, 이것은 번거로운 것 같다.
멋지게 ES6을 사용했다 (도야 얼굴

즉시 $http로 다시 작성합시다.

network.js

let queries = {
    "name": "Donald John Trump",
    "birthday": "1946-06-14",
    "money": NaN
}

$http({
    method: "POST",
    url: "https://example.com/api/action",
    data: queries,
    responseType: "json"
}).then(
    (response) => {
        //成功
    }, 
    (errors) => {
        //失敗
    }
);

이것은 거의 함께, 낙승 너무.
조속히 빌드하고 보내 봅시다!

Response 확인

400 Bad Request

음...과연,
하나만 말할 수 있는 것은
나는 이 숫자를 싫어한다.

그래서 API에서 돌아온 메시지를 읽어 보면,"message": "不正なパラメーターです"
친절하게 고맙습니다. 요청 내용을 살펴 보겠습니다.

요청 데이터 검토

$http의 경우

"name": "Donald John Trump",
"birthday": "1946-06-14",
"money": NaN

어라?
겉으로는 뭔가 변철도 없는 data입니다만...
$.ajax 시대의 것과 비교해 봅시다!

$.ajax의 경우

name=Donald John Trump&birthday=1946-06-14&money=NaN

아... 이건... 설마 json으로 보내는 건,
멋지게 해줘.
어쩔 수 없는 header를 다시 작성하자

다시 도전

network.js

// ...

$http({
    method: "POST",
    url: "https://example.com/api/action",
    headers: {
        //ヘッダーに追加してあげましょう
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: queries,
    responseType: "json"
}).then(
    (response) => {
        //成功
    }, 
    (errors) => {
        //失敗
    }
);

자, 이봐.

Response 확인(두 번째)

400 Bad Request
"message": "不正なパラメーターです"
과연.
디자브입니까?
다시 요청 내용을 확인하세요.

디자브

"name": "Donald John Trump",
"birthday": "1946-06-14",
"money": NaN

이게 뭐야,
Content-Type을 Angular는 보지 않았습니까? ?
아줌마인가! ? (반길레

우선 해결 (?)

어쩔 수 없는, 수동으로 변환해 드리자

network.js

// ...

$http({
    // ...
    data: queryString.stringify(queries),
    // ...
);

let queryString = {
    parse: (text = location.search.substr(1), isDecode = false) => {
        const decode = (isDecode) ? decodeURIComponent : a => a;
        return text.split('&').reduce((obj, v) => {
            var pair = v.split('=');
            obj[pair[0]] = decode(pair[1]);
            return obj;
        }, {});
    },
    stringify: (value, isEncode = false) => {
        const encode = (isEncode) ? encodeURIComponent : a => a;
        return Object.keys(value).map(key => `${key}=${encode(value[key])}`).join('&');
    },
};

이것으로 무사히 움직였습니다.
죄송합니다.

라고 말하고 싶은 곳이지만,
이것을 Angular가 서포트해 주지 않을 리가 없는,
분명 내 모르는 마법이 어딘가있을 것!

결론

Angular는 http 요청시 json과의 상호 작용을 권장합니다 (공식 문서에도 명시 됨)

$ http는 바보입니다 or 내가 바보입니다

ES6은 사용하여 기분이 좋다

나는 400번을 싫어

jQuery ($.ajax) 쪽이 편하다

[추신] $httpParamSerializerJQLike 에서 해결!

뭔가 다른 문명의 이기는 없습니까?
그건 그렇고, 다른 http 요청 시스템 라이브러리는 지금 사용하지 않을 것입니다.
뭔가 좋은 정보가 있으면 교수 바랍니다 ... m (_ _) m

추신

코멘트에서 받은 대로, $http 의 문서로 POST 된 것은 모두 JSON으로 해 줄게! 라고 썼습니다.
그리고 같이 받은 코멘트대로 $httpParamSerializerJQLike 실장을 하면 무사히 할 수 있었습니다!
＼(＾〇＾)／아리가타야 아리가타야＼(＾〇＾)／