ES6/ES2015を使用したJavaScriptでの約束

投稿日: 2022-04-20 2022-10-06
タグ: javascript

Promiseは、ES6（ES2015）JavaScript仕様の新機能であり、複数レベルのコールバック関数に解決することなく、非同期コードを非常に簡単に処理できます。さようならコールバック地獄！

これが私たちが基本的な約束を宣言する方法です。以下では、通常、たとえば外部APIのような非同期のものを呼び出します。ここでは、setTimeout関数を使用してシミュレートしています。

let myPromise = new Promise((resolve, reject) => {
  let data;
  setTimeout(() => {
    data = "Some payload";

if (data) {
  resolve(data);
} else {
  reject();
}

引数として2つの関数、成功のための関数と失敗のための関数を使用して、新しいPromiseがどのように開始されるかに注目してください。そして、これがペイロードデータを取得するためのpromiseを呼び出す方法です。

myPromise.then(data => {
  console.log('Received: ' + data);
}).catch(() => {
  console.log("There was an error");
});

上記は、コンソールで以下をログに記録します。

Received: Some payload

データが受信されなかった場合、代わりに以下がログに記録されます。

There was an error

連鎖の約束

Promiseは、複数のthen機能と一緒にチェーンすることもできます。 then の戻り値は、チェーン内の次のthenで使用可能な値になります。

myPromise.then(data => {
  console.log('Received: ' + data);
  let moreData = "Another payload";
  return moreData;
}).then(data => {
  console.log(data);
}).catch(() => {
  console.log("There was an error");
});

上記は、コンソールで以下をログに記録します。

Received: Some payload
Another payload

getdocs

13036