Promise、Async/Await 詳細説明

1. 約束とは

        Promise は、非同期処理オブジェクトを抽象化し、それに対してさまざまな操作を実行するコンポーネントです。Promise自体は、非同期コールバックの問題を解決するための同期即時実行関数です。resolveまたはrejectコールバック関数が処理のために呼び出されるとき、それは非同期操作です。最初に/catchが実行され、その後resolveが呼び出されて実行されます。メインスタックが完了し、メソッドが /reject に格納されます。

        Promise の機能は、複雑な非同期処理を簡単にモデル化することです。Promise を使用して複数のファイルを連続的に読み取ると、コールバック地獄を解決できます。

JavaScriptによる非同期処理というと、コールバック関数を使うことを思い浮かべる人が多いと思います。

const promise = new Promise(function(resolve, reject) {
  // ... some code
​
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

       Promiseでは同様の非同期処理オブジェクトや処理ルールを標準化し、統一されたインターフェースに従って記述しており、指定されたメソッド以外を記述するとエラーが発生します。

// 使用Promise进行异步处理的一个例子
var promise = getAsyncPromise("fileA.txt"); 
promise.then(function(result){
    // then 获取文件内容成功时的处理
}).catch(function(error){
    // catch 获取文件内容失败时的处理
});

        Promise自体は同期即時実行関数ですが、executorでresolveやrejectが実行されると、この時点では非同期操作となるため、まずthen/catchが実行されます。メインスタックが完了した後、resolve/に格納されたメソッドが実行されます。拒否は実装と呼ばれます。

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

2. ES6 PromiseのAPIメソッド

 1. パラメーター: Promise コンストラクターは関数をパラメーターとして受け入れ、パラメーターは 2 つの関数 (resolve と拒否) を独自のパラメーターとして受け入れます。

new Promise((resolve, reject) => {
    //异步操作
})

promise.then(function(data) {
    console.log('success');
}).catch(function(error) {
    console.log('error');
});

1.1解決

        Promise オブジェクトの成功状態を返し、then メソッドまたは catch メソッドに通知し、オブジェクトの状態に応じて進むべき方向を決定し、後続の操作を実行します。resolve メソッドの役割は、オブジェクトの状態を変更することです。進行中から完了済みまでの Promise オブジェクトを同時に、resolve メソッドにパラメータを渡すことができます。これは、将来、Promise オブジェクトの then メソッドによって取得されます。

1.2 拒否

       失敗した Promise オブジェクトを返します。reject メソッドは同じですが、Promise オブジェクトの状態を失敗に変更するだけで、渡されたパラメータは catch メソッドによって取得されます。

        解決または拒否によって Promise オブジェクトの状態が変更された後、Promise オブジェクトの状態を検出することによって then または catch コールバック メソッドを実行するかどうかが決定されます。このプロセスでは、解決と拒否は、オブジェクトの状態を変更し、コールバック関数に通知し、コールバック関数に必要なパラメーターを渡す役割を果たします。この利点は、論理判断とコールバック関数が別々に処理されることです。

2. コールバック関数 .then および .catch 

コールバック関数の呼び出しは、オブジェクトのステータス (進行中、完了、失敗) に従って完了します(保留中 (進行中)、完全に入力されました (成功)、拒否されました (失敗)

2.1 約束してから

1. 非同期タスクの正しい結果を取得します。

2. Promsie の内部状態が確定した場合にのみ、then メソッド内の対応するハンドラーが実行されます。

3. then メソッドの能力は連鎖させることができます。

2.2 プロミスキャッチ

失敗結果を取得して処理します。

3. メソッド .all() および .race() 

3.1 Promise.all()

1. 複数の非同期タスクを同時に処理し (待機メカニズム)、すべての結果が返された後にそれらを均一に出力します。
2. 実行速度が遅い人はコールバックを実行します。
3. Promise.all は、  Promise オブジェクトの配列をパラメータとして受け取り、配列内のすべての Promise オブジェクトが state を解決または拒否するように変更されたときにメソッドを呼び出します .then 。

let wake=(time)=>{
    return new Promise(function (resolve,reject){
        setTimeout(()=>{
            resolve(`${time/1000}秒后醒来`);
        },time);
    });
}
let p1=wake(10000);
let p2=wake(1000);
Promise.all([p1,p2]).then(res=>{
    let [res1,res2]=res;
    console.log(res1,res2);
}).catch(err=>{
    console.log(err);
})

// 执行结果：10秒后醒来 1秒后醒来

3.2 Promise.race()

1. 複数の非同期タスクを同時に処理します (レーシング メカニズム)。非同期操作が完了すると、次のステップが実行されます。then; 画像をリクエストするときに使用されます。
2. より速く実行した人がコールバックを実行します。

let p1=new Promise((resolve,reject)=>{
    setTimeout(()=>{
            resolve('success');
        }, 10000);
});

let p2=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject('faild');
    }, 500);
});

Promise.race([p1,p2]).then(res=>{
    console.log(res);  
}).catch(err=>{
    console.log(err); // 返回的是faild
})

3. async/awaitとは何ですか

        async/await は Promise の非同期操作を簡素化します (構文シュガー)。

        async 関数は Promise オブジェクトを返します。関数が実行されると、await が発生すると、最初に戻ります。トリガーされた非同期操作が完了した後、関数本体内の次のステートメントが実行されます。これは、スレッドを放棄し、非同期関数本体から飛び出すこととして理解できます。

async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}

console.log('script start');
async1();
console.log('script end')

// 输出顺序：script start->async1 start->async2->script end->async1 end

1. 非同期構文

1. 通常の関数を Promise に自動的に変換し、戻り値も Promise オブジェクトになります。
2. then メソッドで指定されたコールバック関数は、async 関数内の非同期操作が実行された後にのみ実行されます。
3. await は非同期関数内で使用できます。

2. await 構文

1. await は Promise 呼び出しの前に置かれ、await は Promise オブジェクトが解決されるまで次のコードを強制的に待機させ、解決された値は await 式の演算結果として取得されます; 2. await は async 関数内でのみ使用でき
ます、通常の関数で使用するとエラーが報告されます。

3. エラー処理

       非同期関数では、Promise が拒否されたデータであっても論理エラー レポートであっても、黙って飲み込まれるため、try{}catch{} に await を入れるのが最善です。catch は Promise の拒否されたデータをキャプチャできます。スローされたオブジェクトまたは例外

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {reject('error')}, ms);  //reject模拟出错，返回error
  });
}
async function asyncPrint(ms) {
  try {
     console.log('start');
     await timeout(ms);  //这里返回了错误
     console.log('end');  //所以这句代码不会被执行了
  } catch(err) {
     console.log(err); //这里捕捉到错误error
  }
}

asyncPrint(1000);

// 执行结果： start
             error