🔆 Promise

通常、多くの人が学習中に遭遇する問題はCのポインタ、JSのPromise部分です.
(私の個人的な考えは...はは、私がやったのです)
そこで今回はPromiseをしっかり勉強して整理していきたいと思います

非同期

JavaScriptには、特定のコードの演算が終了するまで、コードの実行を停止することなく、次のコードを実行するという特性があります.これらのプロパティがない場合は、サーバにデータを要求すると、サーバが待機している可能性がありますが、リクエストにいつ応答するか分からない可能性があります.

setTimeout()

settimeout()は、Web APIの1つです.指定された時間を待って論理のAPIを実行します.

console.log("첫번째 실행");

setTimeout(()=>{
  console.log("두번째 실행");
},5000)

console.log("세번째 실행");

上記のコードを記述し、通常、次の順序の結果値を推定します.

「初回運転」

5秒後「2回目の運転」

「3回目の運転」

しかし、実際には次の結果値が表示されます.

「初回運転」

「3回目の運転」

5秒後「2回目の運転」

これらの結果が生じる原因もJSの非同期特性である.
コードは上から下へ行われ、settimeout()という関数に遭遇し、そのコードが行われる5秒を待ってから、次のコードではなく次のコードにジャンプします.

プロセスレス非同期処理ソリューション

コールバック関数

プロセスがない場合、コールバック関数を使用して、この非同期処理方法の問題を解決します.
しかし,このコールバック関数を連続的に用いて非同期処理を行うと,コールバック地獄の問題に直面する.次のコードを見てみましょう.

function c(callback){
   setTimeout(()=>{
      callback();
   },1000)
}

c(()=>{
   // console.log("1000ms 후에 callback 함수가 실행됩니다.");
  c(()=>{
     // console.log("2000ms 후에 callback 함수가 실행됩니다.")
    c(()=>{
       console.log("3000ms 후에 callback 함수가 실행됩니다.")
    });
  });
});

この3つのプロセスに対して非同期処理が必要である場合、符号化形式は、上述したコードに示すように、コールバック中にコールバックを維持し続ける.
通常、コードは上から下へ徐々に行われます.しかし、これにより、コードが徐々に内部に入り、コード構造の可読性が低下し、論理を変更することが困難になる.

プロミスの登場

だから私はこのようなcallback地獄を見たくないのでpromisを使います.
プロセスは非同期処理のためのオブジェクトであり,ES 6からJSの標準内蔵オブジェクトとして追加される.

Premisを使う根本的な原因

Webサービスを開発する際、「プロセス」は主にサーバから受信したデータを画面に表示するために使用されます.通常、クライアントがサーバにデータを要求すると、サーバがデータを検索して送信するのに時間がかかります.その後、クライアントはデータの受信を待機し、次の論理を実行し続けます.論理がその前に続行されると、エラーが発生したり、空の画面が表示されたりします.この問題を解決する方法の一つはプロミスだ.

プロミスを例に挙げてみましょう。

プロミスの形態

作成者によってプロセスオブジェクトを作成できます.
ジェネレータはexecutorという名前の関数をパラメータとして使用し、executor関数はresolve、executeをパラメータとして使用します.new Promise((resolve,reject)=>{...}) ;

プロセス処理フロー

ソース:MDN

プロミスの状態。

基本情報オブジェクトのステータスは、次の3つです.
1.保留(待機)状態
2.完了(履行)ステータス
3.拒絶(拒絶)状態new Promise()新しい[基本情報](Basic Info)オブジェクトを作成すると、[基本情報](Basic Info)は[保留](Pending)状態になります.
「≪基本情報｜Basic Information｜oraolap≫」オブジェクトで非同期操作が正常に実行された場合は、「≪解析｜Resolution｜oraolap≫」関数が実行され、失敗した場合は「≪拒否｜Reject｜oraolap≫」関数が実行されます.

new Promise((resolve,reject)=>{
   // pending 상태 
   setTimeout(()=>{
      resolve(); // 1초 후에 fulfilled 상태로 전환
      // reject(); // 1초 후에 rejected 상태로 전환 
   },1000)
});

そしてcatchと

基本情報オブジェクトには、「次」と「catch」という関数が含まれます.

function p(){
   return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve();
      },1000)
   });
}

p().then(()=>{
   console.log("1000ms 후에 성공적으로 fulfilled 상태가 되었습니다.");
}).catch(()=>{
   console.log("rejected 상태")
});

上記のコードでは、pという関数が実行時に新しいプロセスオブジェクトを作成します.thenとcatchがあり、プロセスオブジェクトを解析したときに実行され、catchはプロセスオブジェクトを拒否したときに実行されます.

プロセスオブジェクトのパラメータとfinallyを渡す

executorのresolveとexecuteにパラメータが含まれている場合は、
thenおよびcatchコールバック関数のパラメータとして受信できます.
catchのパラメータは通常、エラーオブジェクトを渡します.

function p(ms){
   return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(ms);
        reject(new Error("reason"));
      },ms)
   });
}

p(1000).then((data)=>{
   console.log(data); // 1000 
}).catch((error)=>{
   console.log(error); // Error 객체 reason 
}).finally(()=>{ 
   console.log("end");
});

finallyはfinally()を設定し、プロセスが解析されても拒否されても、最終的に実行されるコードがある場合は、関数をパラメータとして挿入します.

Promise.resolve(value)

解析実行時にパラメータとして入力される値は、プロセスオブジェクトであっても値であってもよい.

の値がPromisオブジェクトの場合、解析後のメソッドは

を実行します.

Promise.resolve(new Promise((resolve,reject)=>{
   setTimeout(()=>{
      resolve("foo");
   },1000)
})).then((data)=>{
   console.log("프로미스 객체인 경우, resolve 된 결과를 받아서 then이 실행됩니다.",data);
})

1秒後に結果値を出力프로미스 객체인 경우 resolve된 결과를 받아서 then이 실행됩니다.foo

の値がPromisオブジェクトでない場合、パラメータとして値が送信され、メソッド

が実行する.

Promise.resolve("bar").then((data)=>{
   console.log(data); // bar 출력 
});

複数の[基本情報](Basic Info)オブジェクトがある場合

Promise.all()
パラメータとしてPromiseオブジェクトを持つ配列を受信し、すべてのPromiseオブジェクトが正常に解析されると、その配列が実行され、データは解析時に各Promisオブジェクトにパラメータとしてのデータとして渡されます.

Promise.all([p(1000),p(2000),p(3000)])
  .then((data)=>{
     console.log(data); // [1000,2000,3000]
  });

Promise.race()
使用方法は同じですが、raceはすべてのプロセスオブジェクトで最も解析が速いときにthenを実行し、dataは最も解析が速いプロセスでデータを渡します.
上記のコードをraceに変更すると、その後のデータに1000が出力されます.

callback地獄ソリューション

コールバック地獄とは,複数のプロセスを非同期で処理する際に出現し,コードが徐々に内部に深く入り込み,毒性が低下することを意味する.

最初の解決策はチェニンです

function p(){
   return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve();
      },1000)
   });
};

p()
  .then(()=>{
   return p();
})
  .then(()=>p())
  .then(p)
  .then(()=>{
     console.log("4000ms 후");
  });

次に、関数のフィルタリングと解析を行います.
コードは上から下へ行われるため、既存のコールバック地獄よりも高い読み取り可能性が見られます.
このコードを理解していない場合は、上記の手順を参照してください.