가져오기 API: 서버에 게시물 요청 보내기

### 자바스크립트에서 가져오기 API 및 비동기/대기를 사용하여 포스트 요청 구현하기
* 📩 포스트 요청은 가져오기 요청에서 URL을 통해 보낼 수 있는 데이터 양에 제한이 있는 경우 **서버로 데이터를 전송하는 데 사용**됩니다.
* 🔗 Fetch API를 사용하여 게시 요청을 하려면 **옵션 객체가 두 번째 인수**로 제공됩니다.
* 📝 옵션 객체에는 **메서드(예: 'POST')와 헤더 및 요청 본문**과 같은 기타 구성이 포함됩니다.
* 🌐 **JSONPlaceholder는 포스트 요청을 연습하는 데 사용할 수 있는 모의 REST API**입니다.
* 📦 요청 본문은 종종 **`JSON.stringify`를 사용하여 JSON 문자열로 변환**해야 하는 객체입니다.
* ⚙ 비동기 함수는 항상 프로미스를 반환하므로 **Fetch API와 함께 'async/await'**을 사용하면 비동기 연산을 간단하게 처리할 수 있습니다.
* 👨 비동기 함수를 사용하면 **비동기 코드를 동기식 스타일**로 작성할 수 있으므로 이해하고 유지 관리하기가 더 쉬워집니다.
* 🧠 비동기 함수를 사용하면 **여러 개의 프로미스를 순차적으로 대기**하고 최종 결과를 프로미스로 반환할 수 있습니다.

이 동영상에서는 Fetch API를 사용하여 게시물을 요청하는 방법을 설명하며, 그 과정을 단계별로 보여줍니다.

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

가져오기 API로 게시물 요청 받기

포스트 요청은 URL을 통해 데이터를 전송할 때 발생하는 가져오기 요청의 한계를 극복하여 서버로 데이터를 전송하는 데 사용됩니다.

Fetch API로 포스트 요청을 하려면 옵션 객체에서 "메소드"와 "헤더"를 사용해야 합니다.

JSONPlaceholder는 포스트 요청을 위한 유용한 가이드와 코드 예제를 제공하여 개발자가 프로세스를 쉽게 이해하고 구현할 수 있도록 도와줍니다.

JavaScript를 사용하여 API 요청 조작하기

옵션 객체를 수동으로 대체하여 API 요청을 사용자 지정할 수 있습니다.

stringify를 사용하여 JavaScript 객체를 요청 본문용 문자열로 변환할 수 있습니다.

Fetch API 구문을 활용하여 새 리소스를 생성하는 포스트 요청을 만들 수 있습니다.

프로세스를 비동기 함수로 래핑하면 API 요청에 대한 비동기/대기 기능을 효과적으로 활용할 수 있습니다.

비동기/대기 함수를 사용하여 할 일 만들기

이 코드는 비동기 함수를 사용하여 약속의 결과를 기다리는 할 일을 만듭니다.

함수를 호출할 때 await을 올바르게 사용하면 "p.

json은 함수가 아닙니다"라는 문제가 해결됩니다.

async/await을 사용하면 비동기 코드를 더 쉽게 읽고 이해할 수 있습니다.

비동기 함수를 사용한 할 일 생성 및 검색

"createTodo" 함수를 사용하여 새 할 일을 만들고 할 일 개체를 전달할 수 있습니다.

"getTodo" 함수를 사용하면 비동기 프로세스를 사용하여 ID로 할 일을 검색할 수 있습니다.

"getTodo" 함수를 사용할 때는 약속을 반환하므로 반드시 "await"을 사용하세요.

화자는 잘못된 ID(1이 아닌 567)를 전달하여 실수했음을 깨닫고 이에 대한 책임을 집니다.

결국 ID를 5로 수정한 다음 101을 시도하지만 404 오류가 발생합니다.

이해를 돕기 위해 fetch와 함께 비동기/대기 사용을 설명합니다.