ベロフォードと一緒のモダンJavaScript
Reactに入る前に、JavaScriptを素早く復習します.

第3章JavaScriptでの非同期処理

同期処理と非同期処理について説明します.

特定の関数が終了した後にタスクを処理するには、callback関数をパラメータに渡すだけです.
✔callback関数とは、関数タイプの値をパラメータに渡し、パラメータが受信した関数を特定の操作が完了した後に呼び出すことです.

function work(callback){
  specificFunction(() => {
    ...
    callback();
  });
}

console.log('작업 시작!');			// 1
work(() => {					   // 3
  console.log('작업이 끝났어요!')	  // 4
});
console.log('다음 작업');			// 2

非同期タスクを処理する場合、callback関数に加えて、Promiseおよびasync/24679142構文を使用して処理することもできます.

01. Promise

function iap(n, callback){
  setTimeout(() => {
    const increased = n + 1;
    console.log(increased);
    if(callback){
      callback(increased);
    }
  }, 1000);
}

iap(0, n => {
  iap (n, n => {
    iap (n, n => {
      console.log("끝");
    });
  });
});

結果は順番に出てきました.非同期処理が必要なことが多ければ多いほど、コードの深さは深くなります.Promiseでコードが深まる現象を防ぐことができます.

Promiseの作成

const myPromise = new Promise((resolve, reject) => {
  // 구현...
})

成功はawait、失敗はresolve最も基本的なフレームワークは以下の通りです.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  },1000);
});

myPromise
  .then(res => {console.log(res);})
  .catch(err => {console.log(err);});

以下に適用します.

function increaseNprint(n){
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const value = n + 1;
      if(value === 3){
        const error = new Error();
        error.name = "Value is 3";
        reject(error);
        return;
      }
      console.log(value);
      resolve(value);
    }, 1000);
  });
}

increaseNprint(0)
  .then(n => {
    return increaseNprint(n);
  })
  .then(n => {
    return increaseNprint(n);
  })
  .catch(e => {
    console.error(e);
  });

次のincrementNprintでは常にrejectを入れる必要はなく、(n)でコードを書くと.then(increaseNprint)がthenを自動的に送信するので、コードを短縮することができます.

increaseAndPrint(0)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .catch(e => {
    console.error(e);
  });

Promiseを使用すると、非同期操作の数を増やすことができますが、コードの深さは深まりません.

02. async/await

async/awaitはES 8の構文を使用してPromiseをより使いやすくします.

function sleep(ms){
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function process(){
  console.log('안녕');
  await sleep(1000);
  console.log("반갑");
}

process().then(()=> console.log("끝"));

async/await構文を使用する場合、関数を宣言するときに、関数の前にnのキーワードを付け、Promiseの前にasyncを付けて、そのPromiseが終わるのを待ってから、以下の操作を実行します.
関数でawaitが使用されている場合、関数はアップルの値でPromiseを返します.

function sleep(ms){
  return new Promise(res => setTimeout(res,ms));
}

const getDog = async () => {
  await sleep(1000);
  return "멍멍이";
}

async function process(){
  const dog = await getDog();
  console.log(dog);
  
  const dog2 = await getDog();
  console.log(dog);
}
  
process();

async function process(){
  const result = await Promise.all([getDog(), getDog()]);
  console.log(result);
}

process(); //(2) ["멍멍이", "멍멍이"]

async function process(){
const [dog1, dog2, dog3] = await Promise.all([getDog(), getDog(), getDog()]);
  console.log(dog1);
}

process();

✔忴忴を使用する場合、登録されているPromiseに失敗が1つある場合は、すべて失敗とみなされます.
ААААААААААААААААААasyncで結果が得られると、遅い結果でエラーが発生しても無視されます.