- Review the request config object
- Review
JSON.stringify()
and why it's used on the body of our request - Handle the promise using a
.then
and call.json()
on the response - Handle that promise with a second
.then
(where we have our actual response body) - Render data to the DOM
- Discuss optimistic vs pessimistic rendering
- Add a
.catch
to handle failed promises
Posts send data to the server. The information is usually sent from a form, creating a resource in the database.
We use fetch
just like a GET
request, but a POST
request requires an additional argument, a request / config object.
// Method: The HTTP method used in this request. Fetch requests are GET by default. Though they can take a request object, it's not necessary. Other requests, such as POST, require the method to identify what type of request it is.
// Headers: An object that contains additional information for the request. The Content-Type indicates the original media type of the data.
// Body: The data from the request. Before the request can be sent the data must be converted to JSON.
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body:JSON.stringify(formData)
})