HTML5プロフェッショナル認定試験 レベル2 あやふや点メモ②

html編集で<pre><code></code></pre>つかう→みたまま編集です～ぐコードが崩れるのでキレてます、今。

非同期処理

正直に言ってよくわかってない部分。参考書とか他の人の解説見ても難しい。非同期処理でなんかやるっていうのはサンプルでの数行のコードでは必要性が説明しきれず、実務とかでたくさんAPI呼びたいとかそのあたりで必要になるんだろな。

.thenと.catchで続ける場合

const promiseSample = () = return new Promise((resolve, reject) => {
        // APIの呼び出しなど 
        if (//呼び出し後の結果個数  0) {
            //(1)
            resolve("呼び出し完了");
        } else {
            //(2)
            reject(new Error("呼び出し失敗"));
        }
    });
}

promiseSample().then(value  => {
    // (3) .thenでresolveが呼ばれた場合の処理
    console.log(value);
}).catch(error => {
    // (4)　.catchでrejectが呼ばれた場合の処理
    console.error(error);
});
// ちなみに、.thenはいくらでもつなげられる
promiseSample().then(value  => {
    // 処理1
}).then(value  => {
    // 処理2
}).then(value  => {
    // 処理3
})

asyncとawaitを使う場合

async function sample() {
  let result = await new Promise ((resolve, reject) => {
    setTimeout(() => {
      resolve("成功");
    }, 5000);
  });
  return result;
};

sample().then(value => {
  console.log(value);
})

アロー関数

ややこしいが、いかにも問題で出そうな箇所。自分で書いてみるとなんとなくパターンもつかめてきた。

思ったより省略できないんだよな。

// そのまま
let func1 = function (a){
  return a + 100;
}
console.log(func1(10));

// functionを取り払い、パラメーターと処理の間を =>で連結
let func2 = (a) => {
  return a + 100;
}
console.log(func2(10));

// 処理が1文だけの場合、{},returnが不要
let func3 = (a) => a + 100;
console.log(func3(10));

// 引数が1つだけの場合のみ、かっこも取り外せる
let func4 = a => a + 100;
console.log(func4(10));

// ただし、引数がない場合は()がないとエラーになる
let func5 = () => "No Parameter";
console.log(func5());

// 引数を2つ以上取る場合も()が要る
let func6 = (a,b) => a + b +100;
console.log(func6(10,20));

// 処理が2文以上ある場合は{},returnが必要
let func7 = (a,b) => {
 console.log(`引数a:${a},引数b:${b}`);
 return a + b +100;
}
console.log(func7(10,20));

// 以下はErrorということだ
let err1 =  => "No Parameter";
console.log(err1());

let err2 = a,b => a + b +100;

let err3 = (a,b) => console.log(`引数a:${a},引数b:${b}`); a + b +100;