Javascript의 Promise는 무엇입니까? 설명하자!
5378 단어 nodejavascriptbeginners
소개
자바스크립트는 놀랍습니다. 정말 놀라운 사실은 그것이 가장 인기 있는 언어입니다. 초보자와 전문가 모두에게 좋습니다.
Javascript는 웹을 보다 인터랙티브하고 흥미로운 장소로 만들 수 있었기 때문에 매우 놀랍습니다. 몇 장의 사진이 있는 지루한 텍스트에서 놀라운 웹 응용 프로그램 및 브라우저에서 재생할 수 있는 게임에 이르기까지 웹 콘텐츠의 완전히 새로운 세계를 열었습니다.
Javascript는 이전에는 Flash를 사용해야만 가능했던 것(Flash를 기억하십니까?)이 이제 확장 없이 가능해지는 지점까지 수년에 걸쳐 발전했습니다.
웹에서 동적 콘텐츠의 표준이 된 것은 당연합니다. 브라우저는 그것을 지원하지 않는 것은 미친 짓이고 웹사이트는 그것 없이는 아무것도 아닙니다.
작동 방식은 훌륭합니다. HTML 페이지에서 <script> 태그를 여세요. 브라우저 내에서 스크립트를 생성할 수 있는 권한이 있습니다!
<head>
<title>My amazing website</title>
<script>
var a = 5
var b = a * 2
alert(b)
</script>
</head>
또한 Java 또는 Python과 같은 다른 언어처럼 작동합니다! 맨 위에서 시작하여 맨 아래에 도달할 때까지 스크립트를 한 줄씩 실행합니다. 그리고 사용자가 페이지를 로드할 때마다 브라우저에서 이 모든 일이 발생합니다. 멋진 물건!
문제
위의 코드 블록은 몇 가지 매우 기본적인 작업을 수행합니다. 변수를 할당하고 이에 대해 몇 가지 수학을 수행한 다음 결과와 함께 팝업 경고를 표시합니다. 실행하는 데 밀리초가 소요되어야 합니다. 즉, 사용자는 이러한 일이 발생했다는 사실조차 인지하지 못합니다.
하지만 완료하는 데 시간이 조금 더 걸리는 작업은 어떻습니까? 다른 웹사이트에서 데이터를 가져오는 것과 같은 것입니까? 데이터 소스에 따라 응답을 받는 데 몇 초에서 몇 분이 걸릴 수 있습니다! 자바스크립트는 어떻게 대응해야 할까요?
파이썬에서 비슷한 일을 한다고 상상해 보십시오. 다른 웹사이트에서 일부 데이터를 요청하고 변수에 저장하고 사용자에게 표시하려고 합니다.
data = get_data_from("https://api.example.com/data")
print(data)
이것을 터미널에서 실행하면 데이터가 제공될 때까지 몇 초 동안 정지한 다음 해당 데이터를 터미널에 인쇄할 것으로 예상합니다. 이것은 터미널에서 발생할 때 정상인 예상된 동작입니다.
그러나 자바스크립트는 이야기가 다릅니다. 원격 소스에서 일부 데이터를 요청할 때마다 Python과 동일한 방식으로 작동한다고 상상해보십시오.
var data = getDataFrom("https://api.example.com/data")
console.log(data)
문제는 Javascript가 브라우저에서 작동한다는 것입니다. 원격 소스에서 일부 데이터를 가져올 때마다 브라우저가 정지됩니다! Javascript를 기반으로 하는 모든 것은 데이터가 우리에게 돌아올 때까지 작동을 멈춥니다. 버튼이 클릭에 응답하지 않고 모든 종류의 상호 작용이 중지됩니다.
사용자는 어떤 일이 일어나기를 기대하고 아무 일도 일어나지 않을 것으로 기대하는 버튼을 클릭할 것입니다. 이것은 끔찍한 사용자 경험입니다! 이 문제를 해결하려면 무언가를 해야 합니다!
구출을 약속합니다!
Promise는 데이터 요청 문제에 대한 솔루션입니다. 본질적으로 다음과 같이 말하는 방식입니다.
"Go get some data from this API. However, I'm not gonna sit here and wait for you because that could take a while and it would freeze my browser"
약속은 또한 다음과 같이 말하는 방법입니다.
"Go get some data from this API. I'm going to move on to the next line, BUT once you've got some data back, I want you to do SOMETHING with them".
아래의 이 예를 참조하십시오.
console.log("Getting some data for you...")
getDataFrom("https://api.example.com/data")
.then((response) => {
console.log(response)
console.log("All done!")
})
console.log("Javascript is great!")
위의 예를 실행하면 다음과 같이 됩니다.
<head>
<title>My amazing website</title>
<script>
var a = 5
var b = a * 2
alert(b)
</script>
</head>
위의 코드 블록은 몇 가지 매우 기본적인 작업을 수행합니다. 변수를 할당하고 이에 대해 몇 가지 수학을 수행한 다음 결과와 함께 팝업 경고를 표시합니다. 실행하는 데 밀리초가 소요되어야 합니다. 즉, 사용자는 이러한 일이 발생했다는 사실조차 인지하지 못합니다.
하지만 완료하는 데 시간이 조금 더 걸리는 작업은 어떻습니까? 다른 웹사이트에서 데이터를 가져오는 것과 같은 것입니까? 데이터 소스에 따라 응답을 받는 데 몇 초에서 몇 분이 걸릴 수 있습니다! 자바스크립트는 어떻게 대응해야 할까요?
파이썬에서 비슷한 일을 한다고 상상해 보십시오. 다른 웹사이트에서 일부 데이터를 요청하고 변수에 저장하고 사용자에게 표시하려고 합니다.
data = get_data_from("https://api.example.com/data")
print(data)
이것을 터미널에서 실행하면 데이터가 제공될 때까지 몇 초 동안 정지한 다음 해당 데이터를 터미널에 인쇄할 것으로 예상합니다. 이것은 터미널에서 발생할 때 정상인 예상된 동작입니다.
그러나 자바스크립트는 이야기가 다릅니다. 원격 소스에서 일부 데이터를 요청할 때마다 Python과 동일한 방식으로 작동한다고 상상해보십시오.
var data = getDataFrom("https://api.example.com/data")
console.log(data)
문제는 Javascript가 브라우저에서 작동한다는 것입니다. 원격 소스에서 일부 데이터를 가져올 때마다 브라우저가 정지됩니다! Javascript를 기반으로 하는 모든 것은 데이터가 우리에게 돌아올 때까지 작동을 멈춥니다. 버튼이 클릭에 응답하지 않고 모든 종류의 상호 작용이 중지됩니다.
사용자는 어떤 일이 일어나기를 기대하고 아무 일도 일어나지 않을 것으로 기대하는 버튼을 클릭할 것입니다. 이것은 끔찍한 사용자 경험입니다! 이 문제를 해결하려면 무언가를 해야 합니다!
구출을 약속합니다!
Promise는 데이터 요청 문제에 대한 솔루션입니다. 본질적으로 다음과 같이 말하는 방식입니다.
"Go get some data from this API. However, I'm not gonna sit here and wait for you because that could take a while and it would freeze my browser"
약속은 또한 다음과 같이 말하는 방법입니다.
"Go get some data from this API. I'm going to move on to the next line, BUT once you've got some data back, I want you to do SOMETHING with them".
아래의 이 예를 참조하십시오.
console.log("Getting some data for you...")
getDataFrom("https://api.example.com/data")
.then((response) => {
console.log(response)
console.log("All done!")
})
console.log("Javascript is great!")
위의 예를 실행하면 다음과 같이 됩니다.
"Go get some data from this API. However, I'm not gonna sit here and wait for you because that could take a while and it would freeze my browser"
"Go get some data from this API. I'm going to move on to the next line, BUT once you've got some data back, I want you to do SOMETHING with them".
console.log("Getting some data for you...")
getDataFrom("https://api.example.com/data")
.then((response) => {
console.log(response)
console.log("All done!")
})
console.log("Javascript is great!")
데이터가 복구되면 데이터를 인쇄한 다음 "All done!"을 인쇄하십시오.
그렇게 하면 데이터를 가져오는 동안 브라우저가 정지되지 않습니다. 따라서 Javascript가 만족스럽고 브라우저가 만족하며 무엇보다도 사용자가 만족합니다.
이것은 한 달 전에 게시되었으며 꽤 인기가 있는 것으로 입증되었습니다.
Reference
이 문제에 관하여(Javascript의 Promise는 무엇입니까? 설명하자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/savvasstephnds/javascript-promises-explained-4cj7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
