1.1 コールバック関数
コールバック関数: 関数 A をパラメータとして渡して別の関数 B を呼び出すと、A がコールバック関数になります。 [推奨: JavaScript ビデオ チュートリアル]
コールバックという名前のいくつかの例
function あなたは犬を何匹飼っていますか(fn){
fn('犬')
}関数 count Dog(数値){
console.log(数量)
}
あなたは犬を何匹飼っていますか (犬を数えます) // 犬 1 匹匿名コールバック
function あなたは犬を何匹飼っていますか(fn){
fn('犬')
}
あなたは犬を何匹飼っていますか (function(number){console.log(number)
}) // 犬よくある例
jQuery ではコールバック関数が使用されますが、ここでは匿名コールバックが使用されます。
$("#btn").click(function(){
console.log('クリックしてください')
})1.2 コールバック地獄（コールバックのデメリット1）
コールバック地獄: コールバックが入れ子になりすぎて、コードが理解しにくくなる状況を指します。
let info = []function あなたは犬を何匹飼っていますか(fn){
fn('犬')
}関数 あなたは猫を何匹飼っていますか(fn){
fn('猫')
}関数は知っています(数量,コールバック){
info.push(数量)
console.log(情報) if(コールバック){
折り返し電話（）
}
}//呼び出しを開始します。これよりいくつかの階層があると、犬の数を把握するのが難しくなります (function(犬の数){
console.log(犬の数)
わかりました(犬の数, function(){
あなたは猫を何匹飼っていますか(関数(猫の数){
console.log(猫の数)
わかりました（猫の数）
})
})
})1.3 Promiseを使用せずに問題を解決する方法
匿名関数の代わりに名前付き関数を使用する
let info = []function あなたは犬を何匹飼っていますか(fn){
fn('犬')
}関数 あなたは猫を何匹飼っていますか(fn){
fn('猫')
}関数は知っています(数量,コールバック){
info.push(数量)
console.log(情報) if(コールバック){
折り返し電話（）
}
}関数は猫の数を教えてくれます（猫の数）{
console.log(猫の数)
わかりました（猫の数）
}関数はカウントを継続します(){
あなたは猫を何匹飼っていますか（猫の数を教えてください）
}関数は犬の数（犬の数）を示します{
console.log(犬の数)
わかりました (犬の数、数え続けてください)
}
あなたは犬を何匹飼っていますか (犬の数を教えてください) // あまり良くないようです。 。 。1.4 コールバック メソッドは異なるため、個別に覚える必要がある (コールバックの欠点 2)
readFile('C:\1.txt',function (error, data) { // node.js のコールバック ファイル読み取りメソッド if(error) {
console.log('成功')
console.log(data.toString())
} それ以外 {
console.log('ファイルの読み取りに失敗しました')
}
})
$.ajax({ //jQuery の ajax メソッドのコールバック url:'/2.txt'
成功: 関数(応答) {
console.log('成功')
}、
エラー: function(){
console.log('失敗')
}
})Promise は、従来のソリューション (コールバックやイベント) よりも合理的かつ強力な非同期プログラミングのソリューションです。これは最初にコミュニティによって提案および実装され、ES6 がそれを言語標準に組み込み、その使用法を統一し、Promise オブジェクトをネイティブに提供しました。
3.1 実装原理
ES6 では、Promise オブジェクトは Promise インスタンスを生成するために使用されるコンストラクターであると規定されています。関数内で Promise オブジェクトのインスタンスを返すことにより、次のステップで Promise のプロパティとメソッドを使用できます。
function 関数名(){ return new Promise(function(resolve, accept) {
// ... いくつかのコード if (/* 非同期操作が成功しました */){
solve(value); // 非同期操作が成功したときに呼び出され、結果をパラメータとして渡します } else {
拒否(error); // 非同期エラーが発生したときに呼び出され、エラーをパラメータとして渡します }
})
}3.2 呼び出しロジック
S1 も E1 もエラーを報告しませんでした。S2 を実行します (実行を解決すると、システムは完了したと判断し、エラーは報告されません)
S1 または E1 のいずれかがエラーを報告した場合、E2 を実行します (実行が拒否され、システムは実行が完了していないと判断し、エラーを報告します)
フロントエンド (vue) マスタリーコースへのエントリー: ラーニングに入る
4.1 Promiseのプロパティとメソッド
財産
Promise.prototype は、Promise コンストラクターのプロトタイプ メソッドを表します。
Promise.prototype.then()
約束を返します。 Promise の成功コールバック関数と失敗コールバック関数の、最大 2 つのパラメータが必要です。
Promise.prototype.catch()
Promise を返し、拒否を処理します。 Promise.prototype.then(未定義、onRejected) と同等
Promise.prototype.finally()
finally() メソッドは Promise を返します。 then() と catch() の実行後、finally で指定されたコールバック関数が実行されます。 then() と catch() で同じステートメントを 1 回記述する必要がある状況を避けます。
Promise.all(反復可能)
Promise インスタンスを返します。反復可能なパラメーター内のすべての Promise が解決された後、コールバックは解決を完了します。
Promise.race(反復可能)
反復可能内に「解決」または「拒否」する Promise オブジェクトがある限り、Promise オブジェクトの戻り値または拒否のエラー理由を伴う Promise を返します。
Promise.resolve()
指定された値で解決される Promise オブジェクトを返します。ただし、この値が thenable である場合 (つまり、then メソッドを使用している場合)、返される Promise は thenable オブジェクトを「フォロー」し、受信値自体が次の場合はその最終状態 (解決済み、拒否済み、保留中、解決済みを参照) を採用します。 Promise オブジェクトの場合、そのオブジェクトは Promise.resolve メソッドの戻り値として返されます。それ以外の場合は、Promise オブジェクトがこの値とともに成功ステータスとして返されます。
Promise.reject()
拒否の理由パラメータを含む Promise オブジェクトを返します。
4.2 コールバック地獄の例を Promise 形式に書き換える
Promise を使用すると、ロジックが非常に直感的になり、より完全に記述できるようになったことがわかります。
Promise が Promise 内にネストされている場合、つまり Promise がチェーンされている場合、Promise チェーンを使用する場合、各ステップで前のステップからのデータが必要な場合は、パラメータがリゾルブに正常に渡される必要があります。パラメータが失敗した場合、パラメータを渡し忘れると、期待した結果が得られません。
solve は成功したデータを次のコールバックに返します。
Reject は失敗したデータを次のコールバックに返します。
ここで解決するパラメータを渡し、それを失敗の例に変更します。最初に拒否するパラメータを渡さないでください。失敗した場合、次のコールバックはデータを取得しません。
拒否するパラメータを渡す
失敗コールバックが渡されても、デフォルトではunknown()が返されるため、成功と失敗の両方が処理された場合と同じように、次の成功コールバックが実行されることがわかります。次のコールバックが実装されます。
これを期待どおりに変更します。つまり、失敗した場合には呼び出されません。
失敗を呼び出さないための短縮形
上記の状況が実行された後、.then の成功コールバック (犬を除く) が実行されないことを確認するために失敗コールバックを追加してみましょう。
また、後続の成功したコールバックを実行できるように、resolve を返すこともできます。
4.3 アプリケーション
イメージをロードすると、イメージのロードが Promise として書き込まれます。ロードが完了すると、Promise の状態が変わります。
const preloadImage = 関数 (パス) {
return new Promise(function (解決、拒否) {
const image = 新しい画像();
image.onload = 解決;
image.onerror = 拒否;
画像.src = パス;
});
};Generator 関数と Promise の組み合わせ (詳細は参考リンク、Ruan Yifeng のチュートリアルを参照)
5.1 待つ
成功例
失敗した場合は try catch を使用する
await を try catch とともに使用すると、より完全になります。
Promise オブジェクトを使用すると、通常の関数を Promise を返す形式に変更して、コールバック地獄の問題を解決できます。
Promiseの成功・失敗呼び出しロジックを理解し、柔軟に調整できます。
核となる知識を理解し、まずそれを使用し、ゆっくりと知識を統合して吸収します。
以上がES6 Promiseの原理と活用事例分析の詳細な内容でした！
