Fetch Post mit Körperdaten nicht params leer

Question

arbeiten Ich versuche, meine Ajax-Aufruf neu zu schreiben, zu holen:

Ajax:

$.post({ 
    context: this, 
    url: "/api/v1/users", 
    data: { 
     user: 
     { 
      email: email, 
      password: password 
     } 
    } 
    }).done((user) => { 
    }).fail((error) => { 
    }) 

Fetch:

fetch('/api/v1/users', { 
    method: 'POST', 
    headers: { 
    "Content-Type": "application/json" 
    },  
    body: { 
    "user" : 
     { 
     "email" : email, 
     "password" : password 
     } 
    } 
    }) 
    .then(res => { 
    if (res.status !== 200) { { 
     console.log("error") 
     })   
    } else { 
     res.json().then(data => { 
     console.log(data) 
     }) 
    } 
    }) 

ich eine Störung erhalte leere params ~ schlechte Anfrage von meinem Server.

Ich habe auch diesen Weg gefunden, es zu tun, aber in diesem Code unten bekomme ich einen Fehler: Unerwarteter Token.

var payload = { 
    "user" : 
     { 
     "email" : email, 
     "password" : password 
     } 
    }; 

    var data = new FormData(); 
    data.append("json", JSON.stringify(payload)); 

    fetch('/api/v1/users', { 
    method: 'POST', 
    headers: { 
    "Content-Type": "application/json" 
    },  
    body: data 
    }) 

Wie kann ich schreiben die Ajax-Anforderung zu holen?

Answer 1

Gefolgt dieses Thema auf GitHub: https://github.com/matthew-andrews/isomorphic-fetch/issues/34

Die Lösung auf meine Frage ist die JSON.stringify Funktion und Content-Type-Header gesetzt zur Anwendung/json. Nicht ganz sicher, warum der zweite Versuch in meiner Frage nicht funktionierte.

fetch('/api/v1/users', { 
    method: 'post', 
    headers: {'Content-Type': 'application/json'}, 
    body: JSON.stringify({ "user": { 
     "email" : email, 
     "password" : password 
    }}), 
}) 

Offizielle MDN Dokumentation:

var myHeaders = new Headers(); 
myHeaders.append('Content-Type', 'application/json'); 

fetch('/contact-form', { 
    method: 'POST', 
    headers: myHeaders, 
    mode: 'cors', 
    cache: 'default', 
    body: JSON.stringify(fields) 
}).then(() => { 
    dispatch(contactFormSubmitSuccess()); 
}); 

Answer 2

Sie sollten dies versuchen:

fetch('/api/v1/users', { 
    method: 'post', 
    body: JSON.stringify({"user":{ 
     "email": email, 
     "password": password 
    }}), 
}); 

fetch API