이번에는 JavaScript fetch API에서 x-www-form-urlencoded 폼을 사용하는 방법에 대해서 알아봅니다. 기본적으로는 은근히 Request 패키지나 타 패키지에 비해서 raw한 API를 제공하기 때문에 직접 Body를 구성해야 합니다.
x-www-form-urlencoded
먼저 만들기 전에 form data의 구조를 보겠습니다. 기본적으로 x-www-form-urlencoded form data의 구조는 key와 value 값을 querystring과 같이 묶고 URI 컴포넌트로 인코딩하면 완성됩니다.
key=value&something=isthis
함수 만들기
API 사용마다 그 때 그 때 form data를 구성할 수 없기 때문에 재사용가능한 함수를 만들어줍니다. JavaScript에서는 encodeURIComponent
함수로 값들을 인코딩할 수 있습니다.
const buildForm = data => {
const keys = Object.keys(data)
const form = []
for (let i = 0, l = keys.length; i < l; i++) {
form.push(encodeURIComponent(keys[i]) + '=' + encodeURIComponent(data[keys[i]]))
}
return form.join('&')
}
Fetch API에 적용하기
Node-fetch를 사용한 간단한 예제 코드입니다. 아래와 같이 body
옵션을 사용하면 됩니다.
const fetch = require('node-fetch')
const fn = async () => {
const infos = {
username: 'Seia'
}
const response = await fetch('localhost:3000', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
body: buildForm(infos)
})
const json = await response.json()
return json
}
fn()