Question

Front-end Dev. Hyuk·2020년 9월 22일
0

Asynchronous JavaScript

목록 보기
3/3

Sprint를 진행하면서 질문들이 적혀있었는데 그것을 가지고 정리하는 식으로 작성을 해 보았다. 몇가지의 질문은 찾은것도 있으며 아직 정리가 덜 된 것도 있어서 시간날 때마다 수정을 계속해 놓으면서 작성을 해야겠다.

Promise 실행함수가 가지고 있는 두 개의 파라미터, resolve, reject는 각각 무엇을 의미하나요?

Promise 는 사용하는 방식이 크게 두 가지로 볼 수 있습니다.

new Promise(function(resole, reject)) 를 사용하는 패턴과 Promise.resolve(function()) 로 시작하는 패턴이 있다.

resolve는 주어진 값으로 이행하는 Promise 객체를 반환합니다.

값이 then 가능한 (즉, then 메서드가 있는) 경우, 반환된 프로미스는 then 메서드를 따라가고 마지막 상태를 취합니다.

그렇지 않은 경우 반환된 프로미스는 주어진 값으로 이행합니다.

어떤 값이 프로미스인지 아닌지 알 수 없는 경우, Promise.resolve(value) 후 반환값을 프로미스로 처리할 수 있습니다.

reject는 주어진 이유로 거부하는 Promise 객체를 반환합니다.

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject입니다.

resolve, reject함수에는 인자를 넘길 수 있습니다. ( Argument = 어떤 function을 호출시 전달돼는 vlaue,

이때 넘기는 인자는 어떻게 사용할 수 있나요?

new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메소드가 존재하나요?

then , catch 의 내용들 정리

각각은 어떤 용도인가요? (Promise의 세가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?)

  • 대기(pending): 이행하거나 거부되지 않은 초기 상태.
new Promise (); // 이 메서드를 호출하면 대기중(pending)상태가 된다.

// 이것을 호출할 때 callback function을 선언할 수 있고, callback function의 인자는 resolve, reject이다.

new Promise ((resolve, reject) => {
.........
});
  • 이행(fulfilled): 연산이 성공적으로 완료됨. 즉, 비동기 처리가 성공적으로 완료되어 약속을 이행한 상태. /then().
new Promise((resolve, reject) => {
  resolve(); // 콜백 함수의 인자 resolve 를 호출하면 이행(Fulfilled) 상태가 된다.
});
  • 거부(rejected): 연산이 실패함. 비동기 요청 중 에러가 발생했을 때
new Promise((resolve, reject) => {
  reject(); // 콜백 함수의 인자 reject 를 호출하면 이행(Fulfilled) 상태가 된다.
})
.catch()
}

Promise.prototype.then 메소드는 무엇을 리턴하나요?

Promise.prototype.then()프로미스에 이행 또는 거부 처리기를 추가하고 호출된 처리기의 반환값 또는 프로미스가 처리되지 않은 경우 그 원래 처리된(settled) 값으로 결정하는 새 프로미스를 반환합니다

전에 있던 결과값을 return 값을 받아오는것으로 한다.

Promise.prototype.catch 메소드는 무엇을 리턴하나요?

프로미스(promise)에 거부 처리기 콜백을 추가하고 호출된 경우 콜백의 반환값 또는 프로미스가 대신 이행된 경우 그 원래 이행(fulfillment)값으로 결정하는(resolving) 새 프로미스를 반환합니다.

개개인의 코딩 스타일에 따라서 then()의 두 번째 인자로 처리할 수도 있고 catch()로 처리할 수도 있겠지만 가급적 catch()로 에러를 처리하는 게 더 효율적입니다.

await 키워드 다음에 등장하는 함수 실행은, 어떤 타입을 리턴할 경우에만 의미가 있나요?

async 와 await 는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽습니다.

function 키워드 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 됩니다.

다만, 몇 가지 주의할 점이 있다면 await 뒷부분이 반드시 promise 를 반환해야 한다는 것과 async function 자체도 promise 를 반환한다는 것입니다.

await 키워드를 사용할 경우, 어떤 값이 리턴되나요?

await 키워드 뒤에는 promise를 return 하는 함수이어야 한다.

Promise에 의해 만족되는 값이 Return 되고 Promise가 아닌 경우에는 그 자체가 반환된다.

promise의 reslove 값이 리턴될 것이다.

개인적인 질문을 작성하는 곳

여기의 null값은 무엇인가? 그냥 2000으로 작성하면 안되는 것인가?

// part-1 script.js에서

function runPromise() {
  resetTitle(); // 제목을 초기화
  playVideo(); // 영상을 재생

  sleep(1000).then((param) => {
    console.log(param);
    pauseVideo(); // 영상을 멈춘다
    displayTitle(); // 제목을 표시
    return 'world'
  })
  .then((param) => {
    console.log(param);
    sleep(500); // 여기서의 동작 원리는 왜 넣어줬는지 이해가 안감. 여기서의 then 역할은 무엇인가?
  })
  .then(highlightTitle) // 제목을 강조 
  .then(sleep.bind(null, 2000)) // 여기서 null은 함수를 넘기고 두번째는 시간을 넘긴다.?
  .then(resetTitle) // 제목을 초기화
  .catch(err => {
  console.log(err);
}) // Error: 에러 라고 표시되는 것을 console 창에서 볼 수 가 있다.
}
profile
The Known is finite The unknown is infinite.

0개의 댓글