Promise

前回のリリースに続いて、JavaScriptの非同期処理による問題Promiseの解決を支援する方法を学びます.Promiseは、将来的に成功または失敗する可能性のある非同期演算を支援するオブジェクトです.また、このPromiseオブジェクトには、「キュー」、「実行」、および「失敗」の3つのステータスがあります.

Pending:初期状態で非同期処理ロジックを実行しなくても失敗しない.

実行(Fulfilled):非同期処理に成功し、プロセスは結果値を返します.

Failure(Rejected):非同期処理に失敗またはエラー状態.

MDN
待機中のPromiseは、値とともに実行されるか、失敗する可能性があります.実行または失敗した場合は、Promiseのthen()メソッドで値が渡され、失敗した場合はcatch()メソッドで値が渡されます.

1. Promise.resolve() & Promis.reject()

Promise.resolve(value)生成結果値をvalueの実行済み状態Promise生成結果値をPromise.reject(error)の拒否状態errorとする.
例を見てみましょう

const promiseResolve = Promise.resolve('성공')
const promiseReject = Promise.reject('실패')

promiseResolve
.then((resolve) => {
  console.log('1회', resolve)
  return promiseResolve
})
.then((resolve) => {
  console.log('2회', resolve)
  return promiseResolve
}).then((resolve) => {
  console.log('3회', resolve)
  return promiseResolve
})

코드 실행 결과 
1회 성공 
2회 성공 
3회 성공
▹Promise {<fulfilled>: '성공'}

2回目の戻り値Promiseです.

promiseResolve
.then((resolve) => {
  console.log('1회', resolve)
  return promiseResolve
})
.then((resolve) => {
  console.log('2회', resolve)
  return promiseReject
}).then((resolve) => {
  console.log('3회', resolve)
  return promiseResolve
})

코드 실행 결과 
1회 성공 
2회 성공 
▹Promise {<rejected>: '실패'}

コードの実行が2回しか成功せず、失敗したことを確認できます.
最後に、結果値がどのように出力されるかを確認します.

promiseResolve
.then((resolve) => {
  console.log('1회', resolve)
  return promiseResolve
})
.then((resolve) => {
  console.log('2회', resolve)
  return promiseReject
})
.catch((reject) => {
  console.log('3회', reject)
  return promiseResolve
})

코드실행결과
1회 성공
2회 성공
3회 실패

コード実行結果はpromiseReject3回正常に動作し、失敗を示した.
実際,今回議論したrejectMethodcatch()とcatch()は文法が登場してからもう役に立たないため,最近はほとんど使われない傾向にある.Promise文法は次の文章で勉強します.

2.コールバック関数とpromis化

コールバックを受信した関数をプロセスに戻る関数に変換することを承諾と呼びます.作成されたプロセスオブジェクトは、コールバック関数の結果に基づいて実行または失敗したプロセスを返します.
コードを作成すると、コールバック関数よりもプロセスが便利になります.以前のロケーションで作成したコールバック関数を使用して作成したコードを振り返ってみましょう.

コールバック関数

function setTimeoutWithCallback(callbackFunc) {
  setTimeout(() => {
    console.log('2');
    callbackFunc()
  },1000);
}

console.log('1');

setTimeoutWithCallback(() => console.log('3'))

の見込みがある

const one = Promise.resolve('1');
const two = new Promise((resolve) => setTimeout(() => {
  resolve('2')
}, 2000));
const three = Promise.resolve('3');

one.then((oneRes) => {
    console.log(oneRes)
    return two;
  })
  .then((twoRes) => {
    console.log(twoRes)
    return three;
  })
  .then((threeRes) => {
    console.log(threeRes)
  })
  .finally(() => console.log('END'))

コードを記述するためにさらに拡張する場合は、次のようなPromise.resolveを使用しないで、非同期をより明示的に作成することもできます.

const two = (delay) =>
  new Promise((resolve) =>
    setTimeout(() => {
      resolve('2')
    }, delay));

Promise.rejectおよびasync/awaitを使用する簡単な例を作成します.

const starbucks = function (coffeeName) {
  return new Promise((resolve, reject) => {
    if (coffeeName === '아메리카노') {
      resolve('아메리카노 한잔입니다.');
    } else {
      reject('아메리카노는 없습니다.')
    }
  })
}

starbucks('아메리')
.then((res) => console.log(res))
.catch((rej) => console.log(rej))
.finally(() => console.log('감사합니다'));
//output
아메리카노는 없습니다.
감사합니다

starbucks('아메리카노')
.then((res) => console.log(res))
.catch((rej) => console.log(rej))
.finally(() => console.log('감사합니다'));
//output
아메리카노 한잔입니다.
감사합니다

async/awaitを習い始めたばかりの頃は、新しい用語はまだ理解しにくいかもしれませんが、少し熟知していれば、コードを自由に書くことができます.

参考資料

MDN
板橋隊長
change.velog
このチュートリアル