コールバック関数とプロミス
13533 ワード
同期と非同期
javascript言語は一つの「シングルスレッド」の言語です.javascriptは一つの流水線のように、一つの流水線だけです.加工したり、包装したりして、同時に複数のタスクとプロセスを行うことができません.どうしても、jsが仕事をする時は一つの流水線しかないです.同期と非同期の違いは、このライン上の各流れの実行順序が異なることにある.同期タスク:メインスレッド上に並んで実行するタスクは、前のタスクだけが実行済みで、後のタスクが実行されます.非同期タスク:メインスレッドに入らず、「タスクキュー」のタスクに入ると、メインスレッドのタスクの実行が完了するのを待つだけで、「タスクキュー」がメインスレッドに通知し、タスクの実行を要求します.
コールバック関数
—関数がパラメータの場合、もう一つの関数を伝達することはJavaScriptにおいて、コールバック関数は具体的に定義されています.関数Aはパラメータ(関数参照)として他の関数Bに伝達され、この関数Bは関数Aを実行します.関数Aをコールバック関数と呼びます.名前(関数式)がない場合は、匿名のコールバック関数と呼びます.しかし、リフレクト関数には欠点があり、多層ネストの可読性は非常に悪いです.これは「リフレクト地獄」と呼ばれています.
—コールバック関数の簡単な応用、–コールバック関数は関数内部の値を持ち出します.
ES 6追加—promise
Promise非同期プログラミングの解決策は、従来の解決策であるコールバック関数とイベントより合理的で強力である.Promiseオブジェクトには、(1)オブジェクトの状態が外部から影響を受けないという特徴があります.Promiseオブジェクトは非同期操作を表しています.3つの状態があります.(2)一旦状態設定したら、二度と変化しない.いつでもこの結果を得ることができる.Promiseオブジェクトの状態が変わるのは、pendingからfulfilledになることと、pendingからrejectiedになることだけです.この二つの状況が発生する限り、状態が固まります.promise状態:pending(進行中)reject(失敗、未解決)pending–reolve進行中–成功pending–reject進行中–失敗
reolve,rejectここで二つの形参は2つの関数で状態を設定します.resolive(‘状態内のパラメータを設定する’)//成功->インスタンスオブジェクトの下のthenメソッドを探して、括弧の中のパラメータをthenの関数に伝えます.reject()///失敗->>インスタンスオブジェクトの次のcatchメソッドを探して、括弧の中のパラメータをcatchの中の関数に伝えます.}
プロミスの次の2つの静的な方法:Promise.all():複数のPromiseの例を新しいPromiseの例に包装し、一つの配列をパラメータとして受け入れ、配列の中の状態だけがresoveになり、新しいPromiseのインスタンス状態がresove.Promise.race()になります.その状態が一番早く変わります.状態に従います.
javascript言語は一つの「シングルスレッド」の言語です.javascriptは一つの流水線のように、一つの流水線だけです.加工したり、包装したりして、同時に複数のタスクとプロセスを行うことができません.どうしても、jsが仕事をする時は一つの流水線しかないです.同期と非同期の違いは、このライン上の各流れの実行順序が異なることにある.同期タスク:メインスレッド上に並んで実行するタスクは、前のタスクだけが実行済みで、後のタスクが実行されます.非同期タスク:メインスレッドに入らず、「タスクキュー」のタスクに入ると、メインスレッドのタスクの実行が完了するのを待つだけで、「タスクキュー」がメインスレッドに通知し、タスクの実行を要求します.
コールバック関数
—関数がパラメータの場合、もう一つの関数を伝達することはJavaScriptにおいて、コールバック関数は具体的に定義されています.関数Aはパラメータ(関数参照)として他の関数Bに伝達され、この関数Bは関数Aを実行します.関数Aをコールバック関数と呼びます.名前(関数式)がない場合は、匿名のコールバック関数と呼びます.しかし、リフレクト関数には欠点があり、多層ネストの可読性は非常に悪いです.これは「リフレクト地獄」と呼ばれています.
—コールバック関数の簡単な応用、–コールバック関数は関数内部の値を持ち出します.
function fn(callback){
$ajax({
url:' ',
success:function(data){
let arrdata = JSON.parse(data);
callback(arrdata);
}
});
}
fn(function(d){
console.log(d);
});
–配列のいくつかの方法:every/some/filter/map/forEachのようです.let arr = [1, 2, 3, 4];
let arr2 = arr.filter((v) => {
return v % 2;
});
console.log(arr2);
–タイマー内部の関数–イベントハンドバック関数ES 6追加—promise
Promise非同期プログラミングの解決策は、従来の解決策であるコールバック関数とイベントより合理的で強力である.Promiseオブジェクトには、(1)オブジェクトの状態が外部から影響を受けないという特徴があります.Promiseオブジェクトは非同期操作を表しています.3つの状態があります.(2)一旦状態設定したら、二度と変化しない.いつでもこの結果を得ることができる.Promiseオブジェクトの状態が変わるのは、pendingからfulfilledになることと、pendingからrejectiedになることだけです.この二つの状況が発生する限り、状態が固まります.promise状態:pending(進行中)reject(失敗、未解決)pending–reolve進行中–成功pending–reject進行中–失敗
reolve,rejectここで二つの形参は2つの関数で状態を設定します.resolive(‘状態内のパラメータを設定する’)//成功->インスタンスオブジェクトの下のthenメソッドを探して、括弧の中のパラメータをthenの関数に伝えます.reject()///失敗->>インスタンスオブジェクトの次のcatchメソッドを探して、括弧の中のパラメータをcatchの中の関数に伝えます.}
let promise = new Promise((resolve, reject) => {
resolve(' ');
reject();
}
// 1
promise.then((info) => {
console.log(' ');
console.log(info);
}).catch(() => {
console.log(' ');
});
// 2
promise.then(() => { //
console.log(' ');
}, () => { //
console.log(' ');
})
// 3
promise
.then(() => {
console.log(' 1');
})
.then(() => {
console.log(' 2');
})
.catch(() => {
console.log(' ');
});
Promise.prototype.then/Promise.prototype.ccatch resove関数の役割は、Promiseオブジェクトの状態を「未完成」から「成功」に変化させ、非同期操作が成功したときに呼び出し、非同期操作の結果をパラメータとして渡すことです.reject関数の役割は、Promiseオブジェクトの状態を「未完成」から「失敗」(つまり、pendingからreject)に変化させ、非同期操作に失敗したときに呼び出し、非同期操作で報告されたエラーをパラメータとして渡すことです.他にもPromise.prototype.finallyがあります.Promiseオブジェクトの最後の状態に関係なく、実行される操作を指定します.この方法はES2018の導入基準です.プロミスの次の2つの静的な方法:Promise.all():複数のPromiseの例を新しいPromiseの例に包装し、一つの配列をパラメータとして受け入れ、配列の中の状態だけがresoveになり、新しいPromiseのインスタンス状態がresove.Promise.race()になります.その状態が一番早く変わります.状態に従います.
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(' 1');
}, 3000);
});
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(' 2');
}, 1000);
});
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(' 3');
}, 500);
});
let newpromise = Promise.all([p1, p2, p3]);
newpromise.then(function(data) {
console.log(data); // [" 1", " 2", " 3"],, , resolve, Promise resolve
}).catch(function() {
console.log(' ');
})
let newpromise2 = Promise.race([p1, p2, p3]);
newpromise2.then(function(data) {
console.log(data); // [" 1", " 2", " 3"]
}).catch(function(data) {
console.log(data);
});