JavaScript 인터뷰 질문: 약속

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

프론트엔드 개발자로 일하려면 코딩 인터뷰를 해야 합니다.

Promise는 비동기 프로그래밍이 널리 사용되기 때문에 JavaScript의 중요한 부분입니다.

이 기사에서는 JavaScript Promise에 대한 몇 가지 일반적인 질문을 살펴보겠습니다.

약속이란 무엇입니까?

Promise는 JavaScript에서 비동기 작업을 처리하는 한 가지 방법입니다. 각 약속은 단일 작업을 나타냅니다.

여러 비동기 코드를 깔끔하게 결합하는 문제를 해결하기 위해 만들어졌습니다.

약속을 사용하면 중첩 콜백을 너무 깊이 피할 수 있습니다.

예를 들어 다음과 같이 깊게 중첩된 콜백을 작성하는 대신:

const fs = require('fs');

fs.readFile('somefile.txt', function (e, data) {

  fs.readdir('directory', function (e, files) {

    fs.mkdir('directory', function (e) {

    })
  })
})

우리는 쓴다:

const fs = require('fs');

const promiseReadFile = (fileName) => {
  return new Promise((resolve) => {
    fs.readFile('somefile.txt', function(e, data) {
      resolve(data);
    })
  })
}

const promiseReadDir = (directory) => {
  return new Promise((resolve) => {
    fs.readdir(directory, function(e, data) {
      resolve(data);
    })
  })
}

const promiseMakwDir = (directory) => {
  return new Promise((resolve) => {
    fs.mkdir(directory, function(e, data) {
      resolve(data);
    })
  })
}

promiseReadFile('somefile.txt')
.then((data)=>{
  console.log(data);
  return promiseReadDir('directory')
})
.then((data)=>{
  console.log(data);
  return promiseMakwDir('directory')
})
.then((data)=>{
  console.log(data);
})

다음과 같이 약속을 중첩하는 대신 연결했습니다.

promiseReadFile('somefile.txt')
.then((data)=>{
  console.log(data);
  return promiseReadDir('directory')
})
.then((data)=>{
  console.log(data);
  return promiseMakwDir('directory')
})
.then((data)=>{
  console.log(data);
})

이것이 우리가 깊이 중첩된 콜백 대신 긴 프라미스 체인에 대한 프라미스를 작성하려는 이유입니다. 훨씬 읽기 쉽습니다.

Promise에는 3가지 상태가 있습니다. 보류 중일 수 있습니다. 즉, 작업이 아직 시작되지 않았기 때문에 아직 결과를 알 수 없습니다.

이는 수행될 수 있으며 이는 비동기 작업이 성공적이고 결과가 있음을 의미합니다.

또한 거부될 수 있습니다. 즉, 실패하고 실패한 이유가 있습니다.

약속은 이행되거나 거부될 수 있습니다.

또한 위의 코드에서는 resolve 함수를 호출하여 promise의 값을 반환했습니다. Promise의 확인된 값을 얻으려면 콜백의 매개변수에서 확인된 값을 가져옵니다.
data 각 콜백에는 위의 약속에서 해결된 데이터가 있습니다.

콜백에서 다음 약속을 실행하기 위해 다음 약속을 반환했습니다.

약속을 거부하기 위해 reject 생성자에 전달하는 콜백에서 Promise 함수를 호출합니다.

예를 들어 위의 코드를 다음과 같이 변경할 수 있습니다.

const fs = require('fs');

const promiseReadFile = (fileName) => {
  return new Promise((resolve, reject) => {
    fs.readFile('somefile.txt', function(e, data) {
      if (e){
        reject(e);
      }
      resolve(data);
    })
  })
}

const promiseReadDir = (directory) => {
  return new Promise((resolve, reject) => {
    fs.readdir(directory, function(e, data) {
      if (e){
        reject(e);
      }
      resolve(data);
    })
  })
}

const promiseMakwDir = (directory) => {
  return new Promise((resolve, reject) => {
    fs.mkdir(directory, function(e, data) {
      if (e){
        reject(e);
      }
      resolve(data);
    })
  })
}

promiseReadFile('somefile.txt')
.then((data)=>{
  console.log(data);
  return promiseReadDir('directory')
})
.then((data)=>{
  console.log(data);
  return promiseMakwDir('directory')
})
.then((data)=>{
  console.log(data);
})
.catch((err)=>{
  console.log(err);
})

약속이 거부되면 그 다음에 오는 약속은 실행되지 않습니다.

우리는 위와 같이 catch 함수의 콜백에서 오류 세부 정보를 얻고 이것으로 뭔가를 할 수 있습니다.

위의 코드에서 우리는 함수를 생성한 다음 약속을 이행하기 위해 resolve를 호출하고 오류 값으로 약속을 거부하는 reject를 호출하는 약속을 반환하여 각 비동기 코드를 약속으로 변환했습니다.

비동기/대기란 무엇입니까?

async/await는 약속 체인을 더 짧은 방식으로 작성하는 새로운 방법입니다.

예를 들어, 위와 같은 콜백으로 then 함수를 호출하는 대신 다음과 같이 다시 작성합니다.

try {
    const readFileData = await promiseReadFile('somefile.txt');
    console.log(readFileData);
    const readDirData = await promiseReadDir('directory');
    console.log(readDirData);
    const makeFileData = await promiseMakwDir('directory');
    console.log(makeFileData);
    return makeFileData;
  }
  catch(err){
    console.log(err);
  }
})();

이것은 다음과 같습니다.

promiseReadFile('somefile.txt')
.then((data)=>{
  console.log(data);
  return promiseReadDir('directory')
})
.then((data)=>{
  console.log(data);
  return promiseMakwDir('directory')
})
.then((data)=>{
  console.log(data);
})
.catch((err)=>{
  console.log(err);
})

우리가 볼 수 있듯이 async/await는 콜백으로 then를 쓰는 것보다 훨씬 짧습니다.

콜백이 없고 각 콜백에서 약속을 반환할 필요가 없습니다.
readFileData , readDirData , makeFileData 는 각 data 콜백의 then 매개변수와 동일합니다.
try...catch 함수에서 async는 마지막에 catch 호출 및 콜백과 동일합니다. err 두 예에서 동일한 오류 개체가 있습니다.
async 함수는 약속만 반환할 수 있으므로 makeFileData는 실제 값이 아니라 실제로 확인된 약속의 값입니다.

동기 함수처럼 보이지만 동일하게 동작하지 않습니다.

결론

Promise는 깊이 중첩된 콜백 없이 비동기 작업을 깔끔하게 연결하는 방법입니다.
async/await 구문을 사용하여 더 짧고 깔끔하게 만들 수 있습니다.