callback&promise
27905 ワード
同期と非同期
JavaScript言語は「単一スレッド」の言語で、javascriptは1本の流水線のようで、1本の流水線だけで、加工したり、包装したりして、複数のタスクと流れを同時に行うことができません.いずれにしても、jsが仕事をするときは1本の流水線(単一スレッド)しかありません.同期と非同期の違いは,この流水ライン上の各フローの実行順序が異なることである.同期タスクとは、メインスレッドに並んで実行されるタスクで、前のタスクが完了してから、後のタスクを実行することができます.非同期タスクとは、プライマリ・スレッドに入らずに「タスク・キュー」に入るタスクで、プライマリ・スレッド・タスクの実行が完了すると、「タスク・キュー」がプライマリ・スレッドに通知し始め、タスクの実行を要求すると、そのタスクがプライマリ・スレッドの実行に入ることを意味します.非同期実行メカニズムは以下の通りである:1.すべての同期タスクはメインスレッド上で実行され、実行スタックを形成する.2.メインスレッドに加えて、「タスクキュー」も存在します.非同期タスクに実行結果がある限り、「タスクキューにイベントを配置します.3.実行スタック内のすべての同期タスクの実行が完了すると、システムはタスクキューを読み込みます」「ああ、どのようなイベントが入っているか見てみましょう.どの非同期タスクが対応しているかを見て、待機状態を終了し、実行スタックに入り、実行を開始します.4.メインスレッドは上の3番目のステップを繰り返します.
コールバック関数コールバックかんすう:パラメータとして関数が使用され、別の関数が渡されます.
Javascriptでは、コールバック関数は、具体的には、関数Aがパラメータ(関数参照)として別の関数Bに渡され、この関数BがAを実行するように定義されています.関数Aをコールバック関数と呼びます>名前(関数式)がなければ匿名コールバック関数と呼びます.
コールバック関数のネスト:可読性が悪い.(コールバック地獄:コールバック関数のネスト可読性が悪い)
ajaxの依存呼び出し–callback–ajax関数のカプセル化
コールバック関数の概念関数はオブジェクトに属し、同時に関数もオブジェクトのコンストラクタである.関数Aはパラメータとして別の関数Bに渡され、関数Aはコールバック関数である.コールバック関数と同期非同期は直接の関係はなく、同期コールバック、非同期コールバック、イベント処理コールバック、遅延コールバック...
じゅんじょ
コールバック関数(厳密でない)
コールバック関数(厳密)
配列api:配列の新規メソッド:every/some/filter/map/forEach目的:コールバック関数はよく使用されますが、コールバック関数には多層ネストの可読性が悪く、これを「コールバック地獄」と呼ぶ弊害があります.
ES 6-promise(承諾)
Promise非同期プログラミングのソリューションで、従来のソリューションであるコールバック関数とイベントよりも合理的で強力です.
Promiseオブジェクトには以下の2つの特徴があります.
(1)オブジェクトの状態は外部の影響を受けません.Promiseオブジェクトは非同期操作を表し、pending(進行中)、fulfilled(resolve成功)、rejected(失敗)の3つの状態があります.
(2)いったん状態設定をすると、これ以上変わらず、いつでもこの結果が得られる.Promiseオブジェクトの状態が変わるのは、pendingからfulfilledとpendingからrejectedの2つの可能性のみである.この2つの状況が発生すると、状態は凝固する
promise状態:pending(進行中)resolve(成功、解決済み)reject(失敗、未解決)
pending->resolve進行中->成功
pending->reject進行中->失敗
let promise=new Promise((resolve,reject)=>{//promiseオブジェクトを作成します.同期したresolve、rejectここで2つのパラメータは状態を設定するための2つの関数です.resolve(‘状態のパラメータを設定’);//成功->インスタンスオブジェクトの下のthenメソッドカッコの中のパラメータを探してthenの中の関数に渡します.reject()//失敗->インスタンスオブジェクトの下のcatchメソッドを探し、カッコ内のパラメータをcatch内の関数に渡します.});
Promiseプロトタイプの次の2つの一般的な方法:Promise.prototype.then Promise.prototype.catch
resolve関数の役割は、Promiseオブジェクトの状態を「未完了」から「成功」(すなわちpendingからresolved)に変更し、非同期操作が成功したときに呼び出し、非同期操作の結果をパラメータとして渡すことです.
reject関数の役割は、Promiseオブジェクトの状態を「未完了」から「失敗」(pendingからrejected)に、非同期操作が失敗したときに呼び出し、非同期操作で報告されたエラーをパラメータとして渡すことです.
Promise.prototype.finally
finallyメソッドは、Promiseオブジェクトの最後の状態にかかわらず実行されるアクションを指定するために使用されます.このメソッドは、ES 2018が標準を導入したものです.
Promise.all():複数のPromiseインスタンスを新しいPromiseインスタンスにパッケージし、1つの配列をパラメータとして受け入れ、配列内の各状態がresolveになるだけで、新しいPromiseインスタンス状態がresolveになる.
Promise.race():競走の意味.その状態が最も速く変化し、状態に従う.
promise改造ajax依存呼び出し
JavaScript言語は「単一スレッド」の言語で、javascriptは1本の流水線のようで、1本の流水線だけで、加工したり、包装したりして、複数のタスクと流れを同時に行うことができません.いずれにしても、jsが仕事をするときは1本の流水線(単一スレッド)しかありません.同期と非同期の違いは,この流水ライン上の各フローの実行順序が異なることである.同期タスクとは、メインスレッドに並んで実行されるタスクで、前のタスクが完了してから、後のタスクを実行することができます.非同期タスクとは、プライマリ・スレッドに入らずに「タスク・キュー」に入るタスクで、プライマリ・スレッド・タスクの実行が完了すると、「タスク・キュー」がプライマリ・スレッドに通知し始め、タスクの実行を要求すると、そのタスクがプライマリ・スレッドの実行に入ることを意味します.非同期実行メカニズムは以下の通りである:1.すべての同期タスクはメインスレッド上で実行され、実行スタックを形成する.2.メインスレッドに加えて、「タスクキュー」も存在します.非同期タスクに実行結果がある限り、「タスクキューにイベントを配置します.3.実行スタック内のすべての同期タスクの実行が完了すると、システムはタスクキューを読み込みます」「ああ、どのようなイベントが入っているか見てみましょう.どの非同期タスクが対応しているかを見て、待機状態を終了し、実行スタックに入り、実行を開始します.4.メインスレッドは上の3番目のステップを繰り返します.
コールバック関数コールバックかんすう:パラメータとして関数が使用され、別の関数が渡されます.
Javascriptでは、コールバック関数は、具体的には、関数Aがパラメータ(関数参照)として別の関数Bに渡され、この関数BがAを実行するように定義されています.関数Aをコールバック関数と呼びます>名前(関数式)がなければ匿名コールバック関数と呼びます.
コールバック関数のネスト:可読性が悪い.(コールバック地獄:コールバック関数のネスト可読性が悪い)
ajaxの依存呼び出し–callback–ajax関数のカプセル化
コールバック関数の概念関数はオブジェクトに属し、同時に関数もオブジェクトのコンストラクタである.関数Aはパラメータとして別の関数Bに渡され、関数Aはコールバック関数である.コールバック関数と同期非同期は直接の関係はなく、同期コールバック、非同期コールバック、イベント処理コールバック、遅延コールバック...
じゅんじょ
function a(){
setTimeout(() => {
console.log(1);
}, 1000);
}
function b(){
console.log(2);
}
a();
b();
//2,1
コールバック関数(厳密でない)
function a(b){
setTimeout(() => {
console.log(1);
b(); // ,
}, 1000);
}
a(function (){
console.log(2);
});
//1,2
コールバック関数(厳密)
function a(b){
setTimeout(() => {
console.log(1);
b&& typeof b === 'function' && b(); // ,
}, 1000);
}
a(function (){
console.log(2);
});
//1,2
配列api:配列の新規メソッド:every/some/filter/map/forEach目的:コールバック関数はよく使用されますが、コールバック関数には多層ネストの可読性が悪く、これを「コールバック地獄」と呼ぶ弊害があります.
ES 6-promise(承諾)
Promise非同期プログラミングのソリューションで、従来のソリューションであるコールバック関数とイベントよりも合理的で強力です.
Promiseオブジェクトには以下の2つの特徴があります.
(1)オブジェクトの状態は外部の影響を受けません.Promiseオブジェクトは非同期操作を表し、pending(進行中)、fulfilled(resolve成功)、rejected(失敗)の3つの状態があります.
(2)いったん状態設定をすると、これ以上変わらず、いつでもこの結果が得られる.Promiseオブジェクトの状態が変わるのは、pendingからfulfilledとpendingからrejectedの2つの可能性のみである.この2つの状況が発生すると、状態は凝固する
promise状態:pending(進行中)resolve(成功、解決済み)reject(失敗、未解決)
pending->resolve進行中->成功
pending->reject進行中->失敗
let promise=new Promise((resolve,reject)=>{//promiseオブジェクトを作成します.同期したresolve、rejectここで2つのパラメータは状態を設定するための2つの関数です.resolve(‘状態のパラメータを設定’);//成功->インスタンスオブジェクトの下のthenメソッドカッコの中のパラメータを探してthenの中の関数に渡します.reject()//失敗->インスタンスオブジェクトの下のcatchメソッドを探し、カッコ内のパラメータをcatch内の関数に渡します.});
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');
})
.then(()=>{
console.log(' 3');
})
.then(()=>{
console.log(' 4');
})
.catch(()=>{
console.log(' ');
});
console.log(1);
let promise = new Promise((resolve,reject)=>{
console.log(2);
resolve();
console.log(3);
});
promise.then(()=>{
console.log(4);
});
console.log(5);
Promiseプロトタイプの次の2つの一般的な方法:Promise.prototype.then Promise.prototype.catch
function a(){
let promise = new Promise((resolve,reject)=>{
setTimeout(() => {
console.log(1);
resolve();
}, 1000);
});
return promise;
}
a()
.then(function (){
console.log(2);
})
.then(function (){
console.log(3);
});
resolve関数の役割は、Promiseオブジェクトの状態を「未完了」から「成功」(すなわちpendingからresolved)に変更し、非同期操作が成功したときに呼び出し、非同期操作の結果をパラメータとして渡すことです.
reject関数の役割は、Promiseオブジェクトの状態を「未完了」から「失敗」(pendingからrejected)に、非同期操作が失敗したときに呼び出し、非同期操作で報告されたエラーをパラメータとして渡すことです.
Promise.prototype.finally
finallyメソッドは、Promiseオブジェクトの最後の状態にかかわらず実行されるアクションを指定するために使用されます.このメソッドは、ES 2018が標準を導入したものです.
Promise.all():複数のPromiseインスタンスを新しいPromiseインスタンスにパッケージし、1つの配列をパラメータとして受け入れ、配列内の各状態がresolveになるだけで、新しいPromiseインスタンス状態がresolveになる.
let p1 = new Promise((resolve,reject)=>{
setTimeout(() => {
reject(' 1');
}, 3000);
});
let p2 = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(' 2');
}, 1000);
});
let p3 = new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(' 3');
}, 5000);
});
let newpromise = Promise.all([p1,p2,p3]);
newpromise.then(function(data){
console.log(data);// [" 1", " 2", " 3"]
}).catch(function(){
console.log(' ');
})
Promise.race():競走の意味.その状態が最も速く変化し、状態に従う.
let newpromise = Promise.race([p1,p2,p3]);
newpromise.then(function(data){
console.log(data);// [" 1", " 2", " 3"]
}).catch(function(){
console.log(' ');
});
promise改造ajax依存呼び出し