The Fetch function is a very useful tool, but there are some important things that you need to understand before you start using them. Initially, it's good to get an overview of how JavaScript delegates duties so that you can gain insight into how the Fetch function contributes to this process. In this video, you will learn how the Fetch function works to retrieve data from the web and how to provide an example in plain JavaScript of the process. Fetch is used to make a server requests to retrieve some JSON data from it. Fetch API is a set of functionalities that we have at our disposal to use in JavaScript to make such a server request. It's a bit like a clerk at the post office. Say you're bringing a package to the post office and you're the first in the queue. The clerk on the other side of the service desk is JavaScript. Since they can only do one thing at a time. They go through the process of getting your details, measuring the weight of the package, pasting stamps onto the package, charging you for the service, and go into the back-office and carrying the package there, then taking time to find the correct place for the package before it gets shipped. The problem with this approach is that the next step cannot start before the previous one is finished. That's what's known as single-threaded execution. Since JavaScript is not at all equipped to multitask, a way to go around this issue is as follows. First, JavaScript gets your details. At the same time, it calls a clerk to measure the weight of the package. Then JavaScript calls yet another clerk to paste some stamps onto the package. Javascript calls yet another clerk to charge you for the service, and yet another clerk is called to carry the package to the back-office, allowing JavaScript to take care of the next customer. Essentially, this delegation of duties is what's referred to as asynchronous JavaScript. In this metaphor, you can think of the browser as the post office, Javascript as one clerk in the post office and all these other clerks can be referred to as browser APIs or web APIs. Now let's explore a practical example of how this delegation of duties works in JavaScript. I have a local HTML file. The most important part of this file is the script tag, which is getting some JavaScript code from the file named script.js located in the same folder as this HTML file. I'm serving these files locally using the live server VS Code extension. Let me inspect this HTML file in the browser. Currently it only shows H\_1 heading that reads fetching data. Now, let me take a step back and let's say the JavaScript, the post office worker, needs to get some user data from the computer database. Here is the JavaScript code inside the link to script.js file. What do you expect the output of this code will be since JavaScript can only do one single thing at any given time. Well, let's explore what the code is doing step-by-step. On Line 1, it performs a console log for the words another customer approaching. Then it contacts the Fetch API, which is a browser API that is external and separate from JavaScript. Rather than waiting for the Fetch API to return the information, it keeps on executing the code that comes after it, outputting the texts that begins our valued customer. In the meantime, the Fetch API requests some user data from a third party web-based API available at the random user dot.me Website. The fetch function is what's known as a facade function. Meaning it's a function that looks like it's part of JavaScript, but actually it is just a way for me to call a browser API from JavaScript. In other words, it's a way for me to access a piece of browser functionality that's outside of JavaScript. You can think of it as the JavaScript post office clerk calling the records department of the post office to get some data about a customer. When the other clerk gets back with the information and hands it over to the post office clerk, then they will get a JSON representation, and finally, we'll log that data to the console. That means that the sequence of console logs from the code will be as follows. An initial console log that outputs another customer approaching a second console log that outputs our valued customer please wait a moment while I get some information back from the records department, and a final console log that outputs the data. I will now execute this code to confirm that describe the behavior. Everything is already saved. All I need to have this code executed is to go back to the browser, right-click on the page and press the reload command to refresh it. You can achieve the same result by pressing the F5 key on your keyboard. Now, I first get another customer approaching then the our valued customer. Finally, the result of the call to the third party API.
Fetch 함수는 매우 유용한 도구이지만 사용하기 전에 이해해야 할 몇 가지 중요한 사항이 있습니다. 먼저 자바스크립트가 어떻게 임무를 위임하는지에 대한 개요를 파악하면 Fetch 함수가 이 프로세스에 어떻게 기여하는지에 대한 통찰력을 얻을 수 있습니다. 이 동영상에서는 웹에서 데이터를 검색하기 위해 Fetch 함수가 어떻게 작동하는지, 그리고 이 프로세스의 예제를 일반 자바스크립트로 제공하는 방법을 배웁니다. Fetch는 서버에서 일부 JSON 데이터를 검색하도록 서버에 요청하는 데 사용됩니다. Fetch API는 이러한 서버 요청을 하기 위해 자바스크립트에서 사용할 수 있는 함수 집합입니다. 우체국 점원과 비슷합니다. 우체국에 소포를 가져가려고 하는데 대기열에서 가장 먼저 도착했다고 가정해 봅시다. 서비스 데스크 반대편에 있는 점원은 자바스크립트입니다. 한 번에 한 가지 일만 할 수 있기 때문입니다. 그들은 고객의 세부 정보를 받고, 소포의 무게를 측정하고, 우표를 소포에 붙이고, 서비스 요금을 청구하고, 백오피스로 가서 소포를 운반하고, 배송되기 전에 소포를 놓을 정확한 장소를 찾는 데 시간을 할애하는 과정을 거칩니다. 이 접근 방식의 문제점은 이전 단계가 완료되기 전에는 다음 단계를 시작할 수 없다는 것입니다. 이를 단일 스레드 실행이라고 합니다. 자바스크립트에는 멀티태스킹 기능이 전혀 없기 때문에 이 문제를 해결하는 방법은 다음과 같습니다. 먼저 자바스크립트가 사용자의 세부 정보를 가져옵니다. 동시에 점원을 호출하여 패키지의 무게를 측정합니다. 그런 다음 자바스크립트는 또 다른 점원을 호출하여 우표를 패키지에 붙여 넣습니다. 자바스크립트는 또 다른 점원을 호출하여 서비스 요금을 청구하고, 또 다른 점원을 호출하여 패키지를 백오피스로 운반하여 자바스크립트가 다음 고객을 처리할 수 있도록 합니다. 본질적으로 이러한 업무 위임을 비동기 자바스크립트라고 합니다. 이 비유에서 브라우저는 우체국, 자바스크립트는 우체국의 한 점원, 그 외의 모든 점원은 브라우저 API 또는 웹 API라고 할 수 있습니다. 이제 자바스크립트에서 이러한 업무 위임이 어떻게 작동하는지에 대한 실제적인 예를 살펴봅시다. 로컬 HTML 파일이 있습니다. 이 파일에서 가장 중요한 부분은 스크립트 태그인데, 이 스크립트 태그는 이 HTML 파일과 같은 폴더에 있는 script.js라는 파일에서 일부 JavaScript 코드를 가져옵니다. 이 파일은 라이브 서버 VS Code 확장자를 사용하여 로컬로 서비스하고 있습니다. 브라우저에서 이 HTML 파일을 살펴보겠습니다. 현재는 데이터 가져오기를 읽는 H\_1 헤딩만 표시됩니다. 이제 한 걸음 물러나서 우체국 직원인 자바스크립트가 컴퓨터 데이터베이스에서 사용자 데이터를 가져와야 한다고 가정해 보겠습니다. 다음은 script.js 파일에 대한 링크 안에 있는 자바스크립트 코드입니다. 자바스크립트는 주어진 시간에 한 가지 작업만 수행할 수 있으므로 이 코드의 출력은 어떻게 될까요? 이 코드가 수행하는 작업을 단계별로 살펴봅시다. 1줄에서는 다른 고객이 다가오고 있다는 단어에 대한 콘솔 로그를 수행합니다. 그런 다음 외부에 있는 자바스크립트와는 별개의 브라우저 API인 Fetch API에 연결합니다. Fetch API가 정보를 반환할 때까지 기다리지 않고 그 뒤에 오는 코드를 계속 실행하여 소중한 고객을 시작하는 텍스트를 출력합니다. 그 동안 Fetch API는 임의의 사용자 dot.me 웹사이트에서 사용할 수 있는 타사 웹 기반 API에서 일부 사용자 데이터를 요청합니다. 가져오기 함수는 파사드 함수로 알려져 있습니다. 즉, 자바스크립트의 일부인 것처럼 보이는 함수이지만 실제로는 자바스크립트에서 브라우저 API를 호출하는 방법일 뿐이라는 뜻입니다. 다시 말해, 자바스크립트 외부에 있는 브라우저 기능에 액세스할 수 있는 방법입니다. 자바스크립트 우체국 직원이 고객에 대한 데이터를 얻기 위해 우체국 기록 부서에 전화하는 것으로 생각하면 됩니다. 다른 직원이 정보를 가져와 우체국 직원에게 넘기면 우체국 직원은 JSON 표현을 받고 마지막으로 해당 데이터를 콘솔에 기록합니다. 즉, 코드에서 콘솔 로그의 순서는 다음과 같습니다. 다른 고객이 접근 중이라는 내용을 출력하는 초기 콘솔 로그, 기록 부서에서 정보를 가져오는 동안 잠시만 기다려 주세요라는 내용을 출력하는 두 번째 콘솔 로그, 그리고 데이터를 출력하는 최종 콘솔 로그가 있습니다. 이제 이 코드를 실행하여 동작을 설명하는 코드를 확인하겠습니다. 모든 것이 이미 저장되어 있습니다. 이 코드를 실행하려면 브라우저로 돌아가서 페이지를 마우스 오른쪽 버튼으로 클릭하고 다시 로드 명령을 눌러 새로 고침하기만 하면 됩니다. 키보드의 F5 키를 눌러도 동일한 결과를 얻을 수 있습니다. 이제 다른 고객이 먼저 다가오고 그 다음에는 소중한 고객이 다가옵니다. 마지막으로 타사 API에 대한 호출 결과입니다.