Fetch API: Sending Post Requests to Server

The video explains how to make a post request using the Fetch API, demonstrating the process step by step.

### Implementing Post Requests with Fetch API and Async/Await in JavaScript
* 📩 Post requests are used to send data to a server when there is a **limitation on the amount of data** that can be sent through a URL in a get request.
* 🔗 To make a post request using the Fetch API, the **options object** is provided as the **second argument**.
* 📝 The options object includes the method (e.g., '**POST**') and other configurations like **headers** and the **request body**.
* 🌐 JSONPlaceholder is a mock REST API that can be used to **practice making post requests**.
* 📦 The request body is often an object that needs to be converted to a JSON string using **`JSON.stringify`**.
* ⚙ Using `async/await` with Fetch API simplifies handling asynchronous operations, as **async functions always return promises**.
* 👨 Async functions allow you to write asynchronous code in a synchronous style, making it **easier to understand and maintain**.
* 🧠 By using async functions, you can **await multiple promises sequentially** and return the **final result as a promise**.

In today's video, I will tell you how you can receive a post request with the help of Fetch API. We hit a post request whenever we have to send any data to a big server. Because there is a limit in the get request that how much data you can send in the URL. We will see from Fetch that how we can send objects to the server. Let's go to the video screen and see how all these things work. Guys, today we will see about post request that how post request can be sent. So, I would like to introduce you from JSONPlaceholder, which is Pre-Fake Rest API. And we will also see in the notes that how post request is created. First of all, what I have written in the notes is very Criss point. So, let's see that. To make a post request, we need to use fetch options. That is the second argument that comes with the Fetch API. As I told you, it's of the options. So, if we supply those options, then we can send a post request. Now, where we have to give these options.

I have written this syntax here post request. When we want to hit, then we will post the method here in options object, and we're done. Ok. So here we can use the Fetch API. So, I will show you a very simple example. First, I will write let options = here. And Options is an object, as I already told you. I will post the method here. Ok. I have posted the method. And what will we do after posting the method, that which is our headers, which are our headers? In the headers, we will application/json the content-type. Ok. Headers is an object. So, here's the content-type, we'll do it application/json. Ok. And here I type it manually. And our content-type is done application/json. I will put it in this way by hitting enter at the bottom because maybe I want to add more headers too in future. So, content-type is an application/json. If you go to the JSONPlaceholder's website here, then you get a code above here. Now where is it found, I'll tell you.

As soon as you open JSON, first of all, what is this? This is not such a long product. It is just a website to help the developers, okay? You get a JSONPlaceholder. That is, here you have a mock fetch API. If you run this code here, this is the code of get todos, which will provide you todos. Okay, I'll just run it this REPL and open it in a new tab so I can see its console, okay? So, I'll close it here. And here, what will I do? I will hit enter. Then I got this, okay, got some data. It was a simple thing from the server. It was a get request. We are looking at the post request. And look here, for the post request, it is written /post. This is what you can do here. And they have given a guide here in which you have been told how to make a post request. So, I copy this code which they have given. I will paste it. You will see what is going on. Hit copy-paste directly.

yes, I will just replace it options object only. That I have made my own manually, options object. Ok, options and I will put exactly the same type of what they wrote but I am explaining to you one by one. So, what will I do in the body. I will give an object which is given by them different API will expect different body from you. Ok. So, look over here. I will give in such a way by doing JSON.stringify. I will say that the body has become a string. So, what does JSON.stringify do convert a JavaScript object to a string, ok and what does JSON.parse do convert a valid JSON string to a JavaScript object. So here we will post foo, bar and user Id 1 on this URL, ok it's simple so, I'll do it as soon as I will show you here by reloading the page as soon as I do this you see this foo, bar and this which is our resource it has been created, ok. So, we have created from post request the resource we have.

which was our this todo. If I wanted, I could write Harry in the title here. And here in the body could write bhai. And here I could write 1100. So, I will reload the same thing. So here will come Harry bhai and 1100. Are you seeing? Harry bhai and 1100 and Id 101, ok. So, this can also be done. Now this is the normal syntax, we have used it. We have used the syntax of Fetch API, ok. Now what we will do that here I will show you how we will wrap the same thing in an async function, okay. I will wrap this as an async function. Now you will say what are you doing, why are you doing this. I am doing this because we learned async very well and I will write here createTodo = async, ok. It is an async function and here I will write let p = fetch and after doing this here and I will also put it inside it. I will put inside this function.

I will tell you what I am doing. I will write here: let response = await what will I do? p.json. Ok, and here I will do: return response. Here, I will create a function named mainFunc( ) which is what will happen. I will do it something like this: const mainFunc = function and what it will do will do: createTodo( ). And here I will write: let todo = createTodo and I will close it. And here I will write: console.log(todo), ok. I am using here: console.log(todo). And as soon as I reload, you see here this todo. Actually, I have never run this method mainFunc( ). I will run to mainFunc( ) then something will happen. So, I do one thing that what I did here: createTodo. I will make it a sync function and will also await this. Because this async function of ours always returns Promise. So, here I will do: let todo = await I will createTodo something like that, ok. So, I will do this work and reload as soon as.

It is saying p.json is not a function. What kind of joke is this? I do here fetch = I did this = fetch. I did here p = this. p.response = did. p.json. Why is this happening? p.json is not a function, why so. Let's see what drama is happening in this line number 14. I did await p.json. First I took this a promise. Oh, I didn't await it. Oh My God. It has to be await. I will make it await, then I will make it await, ok. Have to await both of them, ok. So, look over here, you come to me like this, okay. Here comes what I created j. So, here's the async await function I've used. The async await function always returns a promise. This is what I told you. So, I created a mainFunc and await that promise. And here it came. So, it becomes a little easier with async await. One by one, your work gets done intermittently, ok. Now in this if I do something like this.

that I'll pass. What is my todo object? So, I'll do ctrl + x here to todo and pass todo to something like. And here, I will say that createTodo(todo). And here, I will write let todo = what this. And here, I do one thing do it todor, which is todo's response, ok. And now I'll reload it over here so you guys see it came here like this again, okay. So, if I do Harry2 bhai2 over here, then I will get to see Harry2 bhai2 here. I did Harry2 bhai2. And if I reload it, then Harry2 bhai2 will come in place of Harry Bhai. So, I can create my own by supply todo. So, I created this async function, ok. I hope you got a good idea of how these things are working here, ok. And if I want, so I here const createTodo. Sorry, make geTodo also getTodo. And here, I will put Id, ok. And I will write getTodo=

There will be a function that will do which will take Id. And And this also has to be a async function, and I make it above mainFunc. I make it below createTodo. Ok, see here, I have made createTodo. I'm making it below getTodo, and her getTodo = async. I will write Id here. And I'll do a simple thing copy-paste from here directly. I'm copy-paste king, okay. Ctrl + c, ctrl + v, and see here let p = await fetch, and then after let response = await response.json. I do a one thing do is something like that. I write here, let r = await response.json. And And what it will do then? Will return r. Ok, return r. Return r has done and saved it, so it's done my job well. Now what I can do here console.log(getTodo(567)). See if it exists or not. I see if 567 Id exists or not here. Why am I getting syntax error? Yes. It's actually a promise, so I have to await it.

so, I'll have to do something like this. console.log. I said over here. Let's await it then. Show it and look here. It has returned this 567 with Id. This todo. I don't know why it returned me this. But which was my request. Oops, I didn't send here this Id. Look. Are you seeing, friends. I have made a mistake and I am blaming them. They did it with Id 1 but I passed with Id 567 because I had coded 8 in my function. So, it's my fault. I'll fix it. My mistake and it's saying it's not 567, sorry. Let's find the 5 one. Is there the 5 one. If not, then now I will become the 5 one and look. 567 is saying this, no. Actually, it takes a little time to save so now it must have been saved. It is 5. Look it gave Id 5. Well, I will see whether it is coming or not coming on id 101, ok. I am seeing if it is coming or not.

Oops, I have to reload here. And the 101 doesn't even have it. Now I don't know how it is pulling. Look, my URL 101 came here but 404 came. But this is how await, async, works with fetch, ok. I hope you understand and I did the async await syntax so that you understand better. Now see here we did, createTodo = async (todo). Why async function is made? Because we want to return one promise and inside it we want to await different promises. I didn't want to use .then syntax. That's why I made an async function because I find it more needable that do p = await then the result of this promise will be awaited and then return the response, which will be a promise. Make that await as well then make the return value of it await as well. Ok, I hope you understand how this thing is done for now, that's all in this video. Thank you so much guys for watching this video. And I will see you next time.

Sending POST request with Fetch API | JavaScript Tutorial in Hindi #67

Code With Harry is my attempt to teach basics and those coding techniques to people in short time which took me ages to learn.
At Code With Harry, I provide a quick and to the point demo along with resources of anything and everything I teach. Source code and other resources are hosted on my website CodeWithHarry.com. I provide source code(if any) in the description of every video.
Quality programming videos in Hindi :)
Business enquiries: harry@codewithharry.com


CodeWithHarry

Receiving Post Requests with the Fetch API

Post requests are used to send data to a server, overcoming the limitations of get requests in sending data through the URL.

To make a post request with the Fetch API, you need to use the "method" and "headers" in the options object.

JSONPlaceholder provides a helpful guide and code examples for making post requests, enabling developers to easily understand and implement the process.

Manipulating API Requests Using JavaScript

You can manually replace the options object to customize the API request.

stringify to convert a JavaScript object to a string for the request body.

By utilizing the Fetch API syntax, you can create a post request to generate a new resource.

Wrapping the process in an async function allows you to effectively utilize the async/await functionality for the API request.

Creating a Todo Using Async/Await Function

The code uses an async function to create a todo, awaiting the result of the promise.

json is not a function" is resolved by correctly using await when calling the function.

Using async/await makes the asynchronous code easier to read and understand.

Creating and Retrieving Todos with Async Functions

You can create a new todo using the "createTodo" function and pass the todo object to it.

The "getTodo" function allows you to retrieve a todo by its ID using an async process.

When using the "getTodo" function, make sure to use "await" since it returns a promise.

The speaker realizes they made a mistake by passing the wrong ID (567 instead of 1) and takes responsibility for it.

They eventually correct the ID to 5 and then try 101, but it results in a 404 error.

The use of async/await with fetch is explained for better understanding.