Skip to main content

Promise-延期された非同期計算

@serverSerrverlesskiy

Promiseは、非同期操作の将来価値を含むオブジェクトです。 たとえば、サーバーにデータを要求した場合、Promiseはこのデータを取得することを約束します。これは、将来使用できます。

math

最初、プロミスのステータスは「保留中」(「待機中」)です。次に、「達成済み」(「正常に完了」)または「拒否」(「エラーで完了🙅‍♂️」)のいずれかです。

promise states

  1. 保留中-結果の準備ができていない場合、約束は保留中です。 つまり、何かが完了するのを待ちます(たとえば、非同期操作が完了するのを待ちます)。
  2. Fulfilled-結果が利用可能であれば、約束は解決されます。 つまり、何かが実行を完了し(たとえば、非同期操作)、すべてが成功しました。
  3. Rejected-実行中にエラーが発生した場合、Promisは拒否されました。

約束の作成

Plus

Promiseオブジェクトは、キーワード🗝️newとそのコンストラクターを使用して🏗️作成されます。 Promiseコンストラクターは1つの引数、コールバック(エグゼキューター関数⚙️とも呼ばれます)を取ります。これは、resolverejectの2つのコールバックを取ります。

実行機能⚙️は、promise🏗️が作成された直後に実行されます。 約束はresolve()の呼び出しで実行され、 reject()で拒否されます。

const promise = new Promise((resolve, reject) => {
if (allWentWell) {
resolve('すべてが完璧に進みました!')
} else {
reject('何かがうまくいかなかった')
}
})

resolve()reject()は、文字列、数値、ブール値、配列、またはオブジェクトの1つの引数を取ります。

関数⚙️にpromiseの機能⚙️を提供するには、その中にPromiseオブジェクトを返す必要があります。

function myAsyncFunction(url) {
return new Promise((resolve, reject) => {
// 機能コード
})
}

約束を使う

Help

Promiseは、 then()および catch()メソッドで使用されます。

then

thenメソッドは、正と負のpromise結果に対して関数⚙️を実行するために使用されます。

Launch

thenメソッドの構文📖:

promise.then(
function (result) {
/* 成功を処理する */
},
function (error) {
/* エラーを処理します */
}
)

thenメソッドの最初の1️⃣引数は、promiseが「成功」状態になり、結果を取得するときに実行される関数⚙️です。

2番目の引数thenは、promiseが"failed🙅‍♂️"状態になり、エラー🙅‍♂️を受け取ったときに実行される関数⚙️です。

Error

thenメソッドの例:

let promise = new Promise(function (resolve, reject) {
setTimeout(() => resolve('done!'), 1000)
})

// resolveは、.thenに渡された最初の関数を実行します
promise.then(
result => alert(result), //「done!」と出力されます 1秒で
error => alert(error) // 起動しません
)

そして、約束にエラー🙅‍♂️があった場合、2番目のものが実行されます:

let promise = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('Whoops!')), 1000)
})

// 拒否すると、.thenに渡された2番目の関数が実行されます
promise.then(
result => alert(result), // 起動しません
error => alert(error) // 「エラー:おっと!」を出力します 1秒後
)

正常に実行された結果のみを表示する必要がある場合は、1つの関数のみをthen⚙️に渡すことができます。

let promise = new Promise(resolve => {
setTimeout(() => resolve('done!'), 1000)
})

promise.then(alert) // 「done!」と出力されます 1秒後

catch

Catch

catchメソッドはエラーをキャッチするために使用されます🙅‍♂️。 thenメソッドの代わりに、エラーに関するエラーメッセージ💬を表示するために使用できます🙅‍♂️。

catchメソッドの構文📖:

let promise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error('Ошибка!')), 1000)
})

promise.catch(alert) // 「エラー:エラー!」を鳴します1秒後

promise.all

このメソッドは、promiseの配列を受け取り、🔄🆕新しいpromiseを返します。この新しいpromiseは、拒否されたpromiseが満たされるとすぐに、配列内のすべてのpromiseが実行または拒否されたときに実行されます。

Return

例えば:

const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise1 выполнен')
}, 2000)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise2 выполнен')
}, 1500)
})
Promise.all([promise1, promise2])
.then(data => console.log(data[0], data[1]))
.catch(error => console.log(error))

ここで、 then()内の引数は、 Promise.all()に渡されたのと同じ順序でpromise値を含む配列です。

問題?

Problem

に書き込む Discord または電報 チャット, また、私たちの購読 ニュース

質問:

Question

promiseが成功したときに呼び出されるメソッドの名前は何ですか?

  1. 拒否
  2. 解決

配列内のすべての約束の履行をチェックするためにどのような方法を使用できますか?

  1. promise.all
  2. promise.race

promiseのエラーをキャッチするためにどのような方法が使用されますか?

  1. その後
  2. キャッチ

このレッスンでどれだけ学んだかを理解するために、このトピックについて当校の[モバイルアプリケーション]http://onelink.to/njhc95)でテストを受けてください。

Sumerian school

リンク:

  1. MDN web docs
  2. Learn JavaScript
  3. Understanding Promises

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Philipp Dvinyaninov

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!