17日目
16111 ワード
Promise
JavaScriptは単一スレッド言語です.(プライマリスレッドとcallスタックで構成されています!)
また、非同期の作業も同時に行うことができます.
奥応?🤢 一度に1つのタスクしか処理できませんが、どのように同時に実行しますか?
→JavaScriptはコアエンジンだけ持って帰らない!
同時実行は、実行環境(実行時)のヘルプで実行します.
(WebAPI(dom, ajax, setTimeout...), Task Queue、Event Loopなどと一緒に作業しています.)
コールバックとは?
コールバックはJavaScriptが非同期処理を行うモードの一つです!
従来のコールバックモードでは、コールバックhellと呼ばれる多くの重複問題が発生しやすい.
コールバックヘリコプター
非同期処理の増加(非同期処理の増加に続く)に伴い、呼び出しは重なり続け、コードが深くなり、管理がさらに困難になる.このような深い重なりは、復調螺旋や滅亡のピラミッドと呼ばれている.function async1('a', function (err, async2){
if(err){
errHandler(err);
}else{
...
async2('b', function (err, async3){
...
}){
...
}
}
});
function async1('a', function (err, async2){
if(err){
errHandler(err);
}else{
...
async2('b', function (err, async3){
...
}){
...
}
}
});フラミスとは何ですか。
非同期演算の終了後の結果を知るオブジェクト!
インフラストラクチャを使用すると、同期メソッドのように非同期メソッドの値を返すことができます.
ES 6が導入した別の非同期処理モードは、従来のコールバックモードによるコールバックスパイラルに起因する.
非同期処理時点をより明確に表現できます!
インフラストラクチャの作成
// 프라미스 객체를 만듭니다.
// 인자로는 (resolve, reject) => {} 이런 excutor 실행자(혹은 실행 함수라고 불러요.)를 받아요.
// 이 실행자는 비동기 작업이 끝나면 바로 두 가지 콜백 중 하나를 실행합니다.
// resolve: 작업이 성공한 경우 호출할 콜백
// reject: 작업이 실패한 경우 호출할 콜백
const promise = new Promise((resolve, reject) => {
if(...){
...
resolve("성공!");
}else{
...
reject("실패!");
}
});インフラストラクチャのステータス値
インフラストラクチャの後続処理方法
Primisによって実装された非同期関数はPrimisオブジェクトを返します!
インフラストラクチャによって実装される非同期関数を呼び出す側は、このインフラストラクチャオブジェクトの後続の処理方法によって非同期処理結果(成功またはエラーメッセージ)を受信して処理する必要があります.
.then(成功時、失敗時)
その後、最初のパラメータは成功時に実行され、2番目のパラメータは失敗時に実行されます.(最初のパラメータをスキップできます!)
// 프라미스를 하나 만들어 봅시다!
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000);
});
// resolve
promise.then(result => {
console.log(result); // 완료!가 콘솔에 찍힐거예요.
}, error => {
console.log(error); // 실행되지 않습니다.
});// 프라미스를 하나 만들어 봅시다!
let promise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("오류!")), 1000);
});
// reject
promise.then(result => {
console.log(result); // 실행되지 않습니다.
}, error => {
console.log(error); // Error: 오류!가 찍힐거예요.
});.catch(失敗時)
// 프라미스를 하나 만들어 봅시다!
let promise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("오류!"), 1000);
});
promise.catch((error) => {console.log(error};);コミットメントチェーン
インフラストラクチャは、複数のインフラストラクチャに接続するための後続の処理方法を採用します.△これはコールバックのヘルプを解決することができます.
-チェイニンは?それはどうしますか.
후속 처리 메서드 (then)을 쭉쭉 이어 주는 거예요.
```jsx
new Promise((resolve, reject) => {
setTimeout(() => resolve("promise 1"), 1000);
}).then((result) => { // 후속 처리 메서드 하나를 쓰고,
console.log(result); // promise 1
return "promise 2";
}).then((result) => { // 이렇게 연달아 then을 써서 이어주는 거예요.
console.log(result);
return "promise 3";
}).then(...);
```async, await
これからは本当にたくさんの文法を読むことができます.
Primisの使い勝手がとても便利になりました!🙂
[詳細について]
授業中に議論しないで、「マイブラウザ」という関数とかわいいことを知っていれば、もっといいです.
1. async
-関数の前にasyncを付けます.
-常にインフラストラクチャに戻ります.△プラミスの値段でなくても、プラミスで包んで返してください.
```jsx
// async는 function 앞에 써줍니다.
async function myFunc() {
return "프라미스를 반환해요!"; // 프라미스가 아닌 걸 반환해볼게요!
}
myFunc().then(result => {console.log(result)}); // 콘솔로 확인해봅시다!
```await
async function myFunc(){
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000);
});
console.log(promise);
let result = await promise; // 여기서 기다리자!하고 신호를 줍니다.
console.log(promise);
console.log(result); // then(후처리 함수)를 쓰지 않았는데도, 1초 후에 완료!가 콘솔에 찍힐거예요.
}すなわちawaitを書くと関数が実行を待つ.
また、昨日作成したログイン機能はそれぞれ実現しました.
本当に量が多すぎて、敵に勇気がありません...
もう午前3时半です.
機会があれば、別途整理します.
明日ではありません.今朝寝ます.
Reference
この問題について(17日目), 我々は、より多くの情報をここで見つけました https://velog.io/@minkuk90/17일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol