Каковы различия между этими тремя различными способами отправки данных формы с помощью запроса POST?

Question

Я изучаю разработку внешнего интерфейса и узнал, что по сути есть 3 способа отправки данных из формы с помощью запроса POST.

let url = 'https://somewebsite.com/mock/login'
let data = {username:'admin', password:'123456'}

fetch(url, {
    method:'POST',
    headers: {
        'Content-Type' : 'application/x-www-form-urlencoded'
    },
    body: Object.entries(data).map(pair => pair[0] + '=' + pair[1]).join('&')
})


fetch(url, {
    method:'POST',
    headers: {
        'Content-Type' : 'application/json'
    },
    body: JSON.stringify(data)
})

let formData = new FormData()
formData.append('username', data.username)
formData.append('password', data.password)

fetch(url, {
    method:'POST',
    headers: {
        'Content-Type' : 'multipart/form-data',
    },
    body: formData
})

Но я действительно не знаю последствий и различий между этими тремя. Какова лучшая практика?

Я только знаю, что мы должны использовать new FormData() при загрузке всего, кроме текста, например, одного изображения или нескольких изображений, большого двоичного объекта вместе с 'Content-Type': 'multipart/form-data'

И я предполагаю, что два других варианта, которые я показал ниже, отличаются по способу кодирования отправленных данных.