TypeScriptの非同期、待機、約束を理解する（記事1）

さらに苦労せずに、前のコード：

asyncとawaitの基本的な構文を理解する

非同期関数内のreturnステートメントによって返された値は、thenメソッドコールバック関数のパラメーターになります

async関数内でエラーがスローされると、返されたPromiseオブジェクトが
拒否され、スローされたエラーオブジェクトは、catchメソッドのコールバックメソッドによって受信されます

function getData（）{
     return "syy" ;
}

console.log（getData（））;  // syy 

async function getData2（）{
     return "syy2" ;
}
console.log（getData2（））;  // 約束{解決済み} 
//  
getData2（）。then（data => {console.log（data）}）;  // syy2

インターフェースTEST_TYPE {
    name：string、
    年齢：数
}
testA = <TEST_TYPE> {
    名前： "ヘンリー" 、
    年齢： 666
}

関数changeA（testA：TEST_TYPE）
{
    testA.age = 777 ;
 //     新しいエラーをスロー（ "changeA new a error"）;   
    return testA; // //返されたデータに特別な注意を払い、外部のthen ...例外を含めてキャプチャする
}

非同期関数testAsync（testA：TEST_TYPE）
{
//     新しいエラーをスローする（ "testAsync new a error。"） 
    let testB = await changeA（testA）;
 //     testB.age = 333; 
    testB.name = "work to be delivery to tomorrow" ;
     return testB;
 //     return testA; 
}

const result1 = testAsync（testA）;
結果1
.then（retValue => {
    console.log（retValue）;
    console.log（retValue.name）;
    console.log（retValue.age）;}、
    拒否 => {
        console.log（ "拒否。エラーが発生している必要があります" ）;
        console.log（reject）;
    }
）。キャッチ（err => {
    console.log（ "エラーをキャッチしてください。" ）;
    console.log（err）;
}）;

これはプログラムがどのように機能するかを理解するための例です

async function sleep（interval：number）{
     return  new Promise（resolve => {
      setTimeout（resolve、interval）;
    }）
    .then（resolve2 => {console.log（ "finish resolve2。" ）}、
      reject2 => {console.log（ "reject2" ）}）;
}
  
async function one2XInAsync（interval：number = 100 ）{
     for（let i = 1; i <= interval; i ++ ）{
        console.log（ "one2FiveInAsync：-----------" + i）;
        if（i == 3 ）
        {
         新しい Error（ "i == 3 break" ）;をスローします。
        }
        睡眠を待つ（ 2000 ）;
    }
}
  
one2XInAsync（ 20 ）
  .then（resolve3 => {
    console.log（ "resolve3" ）;
    console.log（resolve3）;
  }、reject3 => {
    console.log（ "reject3" ）;
    console.error（reject3）;
}）;

コードの一部を貼り付け続けます

let testNum = 1 + 1 ;
function takeLongTime（）{
     return  new Promise（resolve => {
        setTimeout（（） => {
            resolve（ "Hello world" ）;
        }、 4000 ）;
    }）;
}

非同期関数test1（）{
    t1 = letLongTime（）;を待つ
    console.log（testNum）。
    console.log（t1）;
}
test1（）;

単一のPromiseチェーンではasync / awaitの利点を見つけることができませんが、複数のpromiseで構成されるthenチェーンに対処する必要がある場合は、利点を明らかにすることができます。、そして今それをさらに最適化するためにasync / awaitを使用してください）。

ビジネスが複数のステップで完了し、各ステップが非同期で、前のステップの結果に依存するとします。setTimeoutを使用して非同期操作をシミュレートします。

function takeLongTime（n：number）{
     return  new Promise（resolve => {
        setTimeout（（） => resolve（n + 1000 ）、n）;
    }）;
}

関数step1（n：number）{
    console.log（ `step1 with $ {n}`）;
    takeLongTime（n）;を返します。
}

関数step2（n：number）{
    console.log（ `step2 with $ {n}`）;
    takeLongTime（n）;を返します。
}

関数step3（n：number）{
    console.log（ `step3 with $ {n}`）;
    takeLongTime（n）;を返します。
}


/ * *達成の約束* / 
関数doIt1（）{
    console.time（ "doIt1" ）;
    const time1 = 300 ;
    step1（time1）
        .then（time2 => step2（<number> time2））
        .then（ time3 => step3（<number> time3 ））
        .then（結果 => {
            console.log（ `result is $ {result}`）;
            console.timeEnd（ "doIt" ）;
        }）;
}

doIt1（）; 
// step1 with 300 
// step2 with 1300 
// step3 with 2300 
// 結果は3300 
// doIt：3908.552001953125ms 
// doIt：3908.640ms



非同期関数doIt2（）{
    console.time（ "doIt2" ）;
    const time1 = 400 ;
    const time2 = astep1（time1）;
    const time3 = astep2（<number> time2）;
    const result = astep step3（<number> time3 ）;
    console.log（ `result is $ {result}`）;
    console.timeEnd（ "doIt2" ）;
}

doIt2（）;
// 400とSTEP1 
// 1400とSTEP2 
// 2400とSTEP3 
// 結果は3400です
// 4211.223876953125ms：doIt2 
// doIt2：4212.416ms

TypeScriptの非同期、待機、約束を理解する（記事1）

おすすめ