Necesito tu ayuda. Estoy tratando de aprender cómo ejecutar una consulta POST para crear un nuevo objeto en una base de datos usando fetch. Yo uso javascript puro. Sin embargo, me sale un error que se parece a esto:
Mistake TypeError: response.json is not a function at sendData (scrip4t.js:22) at HTMLButtonElement.onclick
¿Qué estoy haciendo mal? Gracias
HTML
<input type="text" id="name"> <input type="text" id="price"> <input type="text" id="description"> <button id="send" onclick="sendData()">submit</button>JS
const url = `http://localhost:8081/laptop` let name = document.getElementById('name') let price = document.getElementById('price') let description = document.getElementById('description') function sendData () { let name_of_laptop = name.value let price_of_laptop = price.value let laptop_description = description.value let data = {name: name_of_laptop, price: price_of_laptop, description: laptop_description} try { const response = fetch(url, { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type' : 'application/json' } }); let json = response.json(); console.log('Success', JSON.stringify(json)) } catch (error) { console.error('Mistake',error) } }Debe anteponerlos con await . Marque aquí para entender async/await
... async function sendData () { ... try { const response = await fetch(url, { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type' : 'application/json' } }); let json = await response.json(); console.log('Success', JSON.stringify(json)) } catch (error) { console.error('Mistake',error) } }Debe usar la cadena de promesa o async/await como el siguiente código:
fetch(url, { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type' : 'application/json' }) .then(response => response.json()) .then(data=> console.log(data));o
async function sendData () const response = await fetch(url, { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type' : 'application/json' } }); let data = await response.json(); console.log(data); }