通常の関数

・コード

function Func() {
 console.log("通常関数のログ出力完了")
}

・Func関数の出力結果(LOGS)

通常関数のログ出力完了

非同期処理

・非同期処理：　ある処理が実行されてから終わるまで待たず、次の処理を行うこと

Promiseについて

・Promise とは？

javascriptにおいて非同期処理の操作が完了したときに結果として返ってくるもの

　2. Promiseは「今は値を返せないけどあとでちゃんと返すよ」と約束するような意味のオブジェクト
　3. 状態としては初期のpending , 処理成功時のfulfilled , 処理が失敗した際のrejected の３種類が存在する

・resolve: 処理が成功した時に呼び出される関数

・reject: 処理が失敗したときに呼び出される関数

Promiseの書き方

new Promise(function(resolve, reject) {
    resolve('成功');
});

new Promise(function(resolve, reject) {
    reject('失敗');
});

※ Promiseを使用した非同期処理が複数連続した場合 → コールバックによるネストが深くなりコードの可読性が落ちてしまう、、

この問題を回避するために Promise.then()によるチェーンを使用する。

then() 返り値はPromiseであるためthen() → then() → ・・・でチェーンを行う事ができる

・then() の書き方

Promise.then(1番目 , 2番目)

１番目：処理が成功したときに呼ばれるコールバック関数　　　　　※コールバック関数:　関数の引数部分に渡されている関数の事

２番目：処理が失敗したときに呼ばれるコールバック関数

・catch() の書き方

Promise.catch(1番目)

１番目：処理が失敗したときに呼ばれるコールバック関数

catch() メソッドはthen() チェーンのどこかでエラーが起きた際にそれ以降のthen() チェーンをスキップしてcatch() を実行する事ができる

※エラーの処理をすぐに必要としない場合、 catch() は then() によるチェーンの最後に書くようにする。ただしcatch() もPromiseを返すのでcatch() → then() のように続けてthen() を実行する事は可能。

then() とcatch() を用いたPromiseのチェーン処理の「成功例」

・コード

new Promise(function(resolve, reject) {

  resolve('I')
    
}).then(function(result) {  // この時点でresutl = I
    
  console.log(result); 
  return "want to" ;

}).then(function(result) { // この時点でresult = want to

  console.log(result); 
  return "eat";

}).then(function(result) { // この時点でresult = eat

  console.log(result +" kanikama");  

}).catch(function(error) { //エラーが発生した場合にエラーを取得し出力する
    
  console.log('エラー: ', error);
    
});

・出力結果(LOGS)

I
want to
eat kanikama

then() とcatch() を用いたPromiseのチェーン処理の「失敗例」

・コード

new Promise(function(resolve, reject) {

  resolve('I')
    
}).then(function(result) {  // この時点でresutl = I
    
  console.log(result); 
  return "want to" ;

}).then(function(result) { // この時点でresult = want to

  throw new Error('２つ目のthenチェーン内でエラー発生');

}).then(function(result) { // この時点でresult = eat

  console.log(result+" kanikama");  

}).catch(function(error) { //エラーが発生した場合にエラーを取得し出力する
    
  console.log('エラー: ', error);
    
});

・出力結果(LOGS)

I
エラー:  Error: "２つ目のthenチェーン内でエラー発生" in Error: 2つ目のthenチェーン内でエラー発生

関数のPromise化

・コード

function funcTOPromise(){
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
      	resolve('3秒経過+問題なく成功');
        } ,3000);
	});
}

funcTOPromise().then((r) => console.log(r) )

・出力結果

3秒経過+問題なく成功

async await について

< async , await >

１．async awaitを使用する事で非同期処理を同期的に(コードを上から下に順番に実行する)処理する事ができる

２．async関数の返り値はPromise

３．使用する場面例：　ファイルの読み込みのような時間のかかる処理を行う際に使用

４．async関数内で、Promise関数にawaitを用いると、同期的に処理できる

５．async関数の中では await [プロミス] = [プロミス].then(result=>{ ... }) と同じこと

　　func()をプロミスを返す関数とした場合の例：　 await func() = func().then(~)

・コード

function promiseFunc(time) {
    return new Promise(function(resolve) {
        setTimeout(resolve, time)
    })
}

//async関数内でPromiseにawaitを適応すると同期的に処理
async function asyncFunc() {
    await promiseFunc(1000)
    console.log("ここまで１秒経過")
    await promiseFunc(2000)
    console.log("ここまで３秒経過")
    await promiseFunc(2000)
    console.log("ここまで５秒経過")
}

・asyncFunc関数の出力結果(LOGS)

ここまで１秒経過
ここまで３秒経過
ここまで５秒経過

・try , catchを使用しPromiseの例外ハンドリングの機能を再現できる　　※例外ハンドリング：エラーを検知、補足する事。

エラー発生なしパターン

・コード

async function asy_FuncTest() {
  let v ;
  try {
    v = await require('./SampleFolder/Sample1');
    v = "成功";
  } catch (error) {
    v = 'エラー発生';
    console.log('エラー: ', error);
  }
  console.log(v)
}

asy_FuncTest()

・出力結果(LOGS)

成功

エラー発生パターン

・コード

async function asy_FuncTest() {
  let v ;
  try {
    throw new Error('バグ発生');
  } catch (error) {
    v = 'エラー発生';
    console.log('エラー: ', error);
  }
  console.log(v)
}

asy_FuncTest()

・出力結果(LOGS)

エラー:  Error: "バグ発生" in Error: バグ発生

参考にしたサイト

Qita記事

・https://qiita.com/niusounds/items/37c1f9b021b62194e077

・https://qiita.com/Naoto9282/items/af0a38cc916176cdd50f

・https://qiita.com/okashoi/items/e7992a23e5e9193cde9f