javascriptの非同期処理 async await promiseについて勉強したので個人的にまとめてみた

# 通常の関数 

・コード

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

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

```javascript
通常関数のログ出力完了
```





# 非同期処理



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



#  Promiseについて 



・Promise とは？

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

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



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

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



**Promiseの書き方**

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

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



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

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

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



***・then() の書き方***

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

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

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





**・catch() の書き方**

```javascript
Promise.catch(1番目)
```

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

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



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



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

・コード

```javascript
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)

```javascript
I
want to
eat kanikama
```





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

・コード

```javascript
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)

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





**関数のPromise化**

・コード

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

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

・出力結果

```javascript
3秒経過+問題なく成功
```





# async await について



### < async , await >

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

２．async関数の返り値はPromise

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

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

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

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



・コード

```javascript
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)

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



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



**エラー発生なしパターン**

・コード

```javascript
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)

```javascript
成功
```



**エラー発生パターン**

・コード

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

asy_FuncTest()
```

・出力結果(LOGS)

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





# 参考にしたサイト

**Qita記事**

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

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

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