JavaScript에서 x-www-form-urlencoded Body 사용하기

이번에는 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()