JS:約束とは何ですか.

19861 ワード

約束とは?


promiseは、JavaScriptで非同期データを処理するためのオブジェクトです.
📌 ここで、JavaScriptの非同期処理は次のとおりです.
これは、「javascriptのプロパティ」を意味し、特定のコードの実行が完了するのを待つのではなく、まず次のコードを実行します.

承諾された使用


promiseオブジェクトを使用すると、非同期タスク(成功または失敗)の完了後の結果値を取得できます.従って、後続処理を容易に制御することができる.
promiseは関数をパラメータとして受け入れ,パラメータに入力された関数は再解析(非同期処理成功)と拒否(非同期処理失敗)の2つの関数をパラメータとして用いる.resolveでメソッドに切り替え、rejectでcatchメソッドのパラメータに切り替えます.
function getData(callback) {
 return new Promise(function(resolve, reject) {
  $.get('url', function(response) {
   if (response) {
    resolve(response) // 성공
   }
   reject(new Error("Request is fail")) // 실패
  })
 })
}
// resolve 시 then 메소드, reject 시 catch 메소드의 인자로 넘어간다.
getData().then(function (data) { 
 console.log(data)
}).catch(function (err) {
 console.log(err)
});
// new Promise로 생성된 인스턴스는 객체이기 때문에 변수로 할당하거나 함수의 인자로 사용 가능
cosnt promise = new Promise((res, rej) => {
  setTimeout(() => {
    res(111);
  }, 1000);
});
このときthenメソッドは再びpromiseに戻り,thenを連続的に使用することができる.

コミットメントの3つのステータス


promisを使用する際に理解しなければならない最も基本的な概念はpromisの状態である.ここでいう状態はプロミズの処理過程を意味する.new Promise()を使用してプロセスを作成および終了します.3つのステータスがあります.

保留中(保留中)


まず、以下のnew Promise()メソッドを呼び出すと、保留状態になります.
new Promise();
new Promise();メソッドを呼び出すと、コールバック関数を宣言できます.コールバック関数のパラメータはresolve、rejectです.
new Promise(function(resolve, reject) {
  //...
});

Fullfilled(実行)


ここで、callback関数を実行するパラメータresolveは、以下のように「充填された」状態になる.
new Promise(function(resolve, reject) {
 resolve();
});
また、実行状態に達した場合には、以下のthen()を用いて処理結果値を得ることができる.
function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});
🙆 約束の履行を少しでも違えば、「成功」と見ることができる.

Rejected(失敗)

new Promise()を使用してpromisオブジェクトを作成する場合は、callback関数パラメータを使用して解析および拒否できます.ここで、以下に示すように呼び出しが拒否されると失敗します.
new Promise(function(resolve, reject) {
  reject();
});
また、失敗状態であれば、catchとして失敗の原因(失敗処理の結果値)を得ることができる.
function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

承諾された処理プロセス



複数の承諾の接続


promisのもう一つの特徴は、複数のpromisを接続して使用できることです.前の例でthen()メソッドを呼び出すと、新しいプロセスオブジェクトが返されます.従って、以下のように符号化することができる.
function getData() {
 return new Promise({
   // ...
 });
}

// then() 으로 여러 개의 프로미스를 연결한 형식
getData()
 .then(function(data) {
   // ...
 })
 .then(function() {
   // ...
 })
 .then(function() {
   // ...
 });

承諾されたエラー処理方法


実際のサービスを実施すると、ネットワーク接続、サーバの問題などのエラーが発生します.そのため、プロミスのエラー処理方法も理解しなければならない.
エラー処理には2つの方法があります.

1.then()の2番目のパラメータを使用してエラーを処理する方法

getData().then(
 handleSuccess,
 handleError
);

2.catch()の使い方

getData().then().catch();
以上の2つの方法は、promiseのreject()メソッドが呼び出され、失敗状態にある場合に実行される.
簡単に言え!プロセスロジックが正常でない場合は呼び出されます.以下の場合は以下のようになります.
function getData() {
 return new Promise(function(resolve, reject) {
   reject('failed');
 });
}

// 1. then()의 두 번째 인자로 에러를 처리하는 코드
getData().then(function() {
 // ...
}, function(err) {
 console.log(err);
});

// 2. catch()로 에러를 처리하는 코드
getData().then().catch(function(err) {
 console.log(err);
});
📌 promise処理はできるだけcatch()を使います!
前に2つのエラー処理方法を見ました.それぞれのスタイルに応じて、Then()を2番目のパラメータとして処理してもよいし、catch()として処理してもよいが、できるだけcatch()として処理したほうが効率的である.
then()を使用すると、最初のコールバック関数の内部に発生するエラーが正しく見つからない可能性があります.
そこで,より多くの異常を処理するためにpromisの末尾にcatch()を加えるようにした.