JavaScript 에서 POST 호출 하는 방법

Web API 를 호출하는 여러 방법이 존재하지만 아래 방법이 가장 심플해 보여 기록하고자 합니다.

 

1) fetch 관련한 상세 내용은 링크 참조 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch API 사용하기 - Web API | MDN

 

2) 사용 예시

• POST 호출
• Content-Type / application/x-www-form-urlencoded

fetch('https://localhost:7162/api/Authentication/GetAccessToken', {
    method: 'POST',
    headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8;",
    },
    body: new URLSearchParams({
        'requstDate': '20231201',
        'drsCode': '20067',
        'companyCode': '1000',
        'businessNumber': '1043288907'
    })
}).then(response => {
    response.json().then(json => {
        $("p").text(JSON.stringify(json, null, 4));
    });
})
.catch(error => {
    console.log('reason >>', error)
});

 

처음에 response 에 바로 호출 결과가 들어 있을 것으로 예상했으나 예상치 않게 Promise 개체가 담겨 나와 당황했다가 fetch 가 비동기 호출이라는 사실을 알고 이해되었다.

 

응답 데이터를 다시한번 .then 형식으로 처리해주면 원하는 결과가 전달된다.