Javascript에서 약속이란 무엇입니까?

Javascript는 동기식입니다. 이전 절차가 변경될 때까지 기다리지 않고 차례로 실행됩니다.

let name;
name = 'bob'
console.log(name) // bob
name = 'alice'
console.log(name) // alice

예상한 대로 위의 각 행은 차례로 실행됩니다. 그러나 이것이 도움이 되지 않는 경우가 많습니다. 예를 들어:

let name;
name = 'bob';
console.log(name); // bob
setTimeout(function(){
  name = 'alice'; 
},100)
console.log(name); // ?

위에서는 100밀리초 후에 이름이 변경되도록 설정하고 있습니다. 그러나 두 번째 로그는 변경을 기다리지 않으므로 name의 두 콘솔 로그 모두 "bob"을 반환합니다. (이름은 변경되지만 충분히 빠르지는 않습니다.)

콜백 없는 솔루션

우리가 작업하고 있는 예제는 지금은 매우 간단합니다. 두 번째 콘솔 로그를 타이머 내부로 쉽게 이동하고 완료할 수 있지만 대신 콜백 함수를 사용하겠습니다.

let name;
const callback = () => console.log(name)
name = 'bob'
console.log(name); // bob
setTimeout(function(){
  name = 'alice';
  callback(); // alice
},100)

이제 콜백 함수 내부에 콘솔 로그를 추가하고 setTimeout가 100밀리초 내에 콜백을 실행하도록 하여 지연을 설명합니다.

약속은 콜백의 필요성을 제거합니다.

평범한 영어로 약속을 하면 주어진 시간에(조건이 맞을 때) 무엇인가를 하겠다고 말하는 것입니다. 타이머는 100밀리초 안에 이름을 "alice"로 변경할 것이라고 약속합니다. 그런 다음 타이머가 약속을 이행하면 이행에 따라 무언가를 수행하는 것은 우리에게 달려 있습니다. 따라서 콜백과 크게 다르지 않지만 이후에 어떤 일이 발생하는지 알 필요가 없습니다.

행동으로 보자

let name; 
name = 'bob'
console.log(name); // bob
const ourPromise = new Promise((resolve, reject)=>{ 
  setTimeout(function(){
  name = 'alice';
  resolve();
},100)
})
ourPromise.then(() => console.log(name))

우리는 setTimeout를 약속으로 래핑하므로 setTimeout는 생성된 변경 사항으로 우리가 무엇을 할지 알 필요가 없습니다. resolve() 의 실행은 단순히 약속의 상태를 pending 에서 fulfilled 로 변경한 다음 약속에서 then() 메서드를 실행하여 언제든지 해당 변경 사항을 수신하는 데 사용합니다.

참고: console.log(ourPromise) 메서드 내에서 .then() 를 실행하면 { <state>: "fulfilled", <value>: undefined } 객체를 얻게 됩니다. Promise에서 resolve()를 제거하고 then() 내부에서 콘솔 로그를 다시 실행하면 { <state>: "pending" }가 표시됩니다.

ourPromise.then(() => console.log(ourPromise))

범위

약속이 해결될 때 콘솔 로그에서 본 것처럼 일반적으로 일부 데이터를 전달합니다. 이 예제에서는 전역 범위의 name가 약속 내에서 변경될 수 있는지 여부를 테스트하고 싶었습니다. 실제 세계에서는 무의미하지만 데모용으로는 쉽습니다.

약속의 내부 범위를 대신 사용하는 방법을 살펴보겠습니다.

let name; 
name = 'bob'
console.log(name); // bob
const ourPromise = new Promise((resolve, reject)=>{ 
  let name; //different to the outside scope
  setTimeout(function(){
    name = 'alice';
    resolve(name); // pass this new name 
  },100)
})
ourPromise.then(resName => console.log(`promised name is ${resName}, and not ${name}`))
console.log(name); // we no longer need this (it still return 'bob'

Promise 내에서 외부 범위의 "이름"과 완전히 다른 새로운 "이름"변수( let name )를 만들었습니다. 그런 다음 100밀리초 후에 변경하고 이번에는 resolve 메서드를 사용하여 전달합니다.

참고: 이번에 then 메서드 내에서 콘솔 로그를 실행하려고 다시 시도하면 { <state>: "fulfilled", <value>: "alice" } 값을 얻게 됩니다. 그리고 대부분의 시간 동안 우리는 어떤 API에서 값이 오기를 기다릴 것입니다. 예를 들어:

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(resolvedData => console.log(resolvedData))