課題10に進みました。前回のasync/awaitを使った非同期処理にtry-catch-fainallyを追加し、例外処理をします。
お題
問題9に追加で try-catch-finaliy を書いてください
調べたこと
最初、try-catch-finallyはなんのことかわからなかったので、調べました。
プログラムの実行中に例外（エラー）が発生した場合、通常はエラー内容を表示し、実行を中断します。ただ、致命的なエラーではない場合、実行を中断せず、発生した例外に応じて処理をしたいときがあります。
このような処理を例外処理と呼び、try-catch-finally構文を使って記述します。
try-catch-finallyの書き方は以下です。
try{
//処理
}catch(変数名){
//try節内でエラーが発生した際に実行される処理
}finally{
//最後に必ず実行される処理
}tryには、例外が発生する可能性のある処理を記述します。発生した例外は、catch節でキャッチされ、catch節に記述した処理を実行します。finally節は、tryで例外が起こっても起こらなくても、必ず実行される処理です。
try節で発生した例外を受け取る仮引数の変数名は任意ですが、通常はe（「exception」の頭文字）を使います。
tyry-catch-finallyの処理については、こちらの記事を参考にさせて頂きました。
最初のコード
今回は、ちひろさんとsenさんにレビューして頂きました！いつもありがとうございます！
function showLoadingImg(){
const loadingImg = document.createElement('img');
loadingImg.src = "loading-circle.gif";
loadingImg.alt = "ローディング画像";
document.getElementById('js-loading').appendChild(loadingImg);
}
function removeLoadingImg(){
document.getElementById('js-loading').remove();
}
function getDataAfter3Seconds(){
return new Promise((resolve,reject) => {
const categriesData = [
{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"},
{to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}
];
setTimeout(() => {
if(categriesData){
resolve(categriesData);
}else{
reject(new Error('データの取得ができませんでした'));
}
},3000);
});
}
async function getDataProcess(){
showLoadingImg();
try{
return await getDataAfter3Seconds();
}catch(e){
console.error(e.message);
}finally{
removeLoadingImg();
}
}
async function showCategoriesList(){
const result = await getDataProcess();
const fragment = document.createDocumentFragment();
for(const list of result){
const li = document.createElement('li');
const a = document.createElement('a');
const img = document.createElement('img');
a.textContent = list.text;
a.href = `/${list.to}`;
img.src = list.img;
img.alt = list.alt;
fragment.appendChild(li).appendChild(a).appendChild(img);
}
document.getElementById('js-list').appendChild(fragment);
}
showCategoriesList();Promiseの処理は、resolveとrejectを書いたのですが、この課題ではrejectは不要かも、との指摘を頂いたので、下記のように修正しました。また、関数名はシンプルな方がわかりやすいとの指摘をいただいたので、修正しました。
function getData(){
return new Promise(resolve => {
const categriesData = [
{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"},
{to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}
];
setTimeout(() => {
resolve(categriesData);
},3000);
});
}最終的なコード
下記のコードでapprove頂くことができました！
function showLoadingImg(){
const loadingImg = document.createElement('img');
loadingImg.src = "loading-circle.gif";
loadingImg.alt = "ローディング画像";
document.getElementById('js-loading').appendChild(loadingImg);
}
function removeLoadingImg(){
document.getElementById('js-loading').remove();
}
function getData(){
return new Promise(resolve => {
const categriesData = [
{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"},
{to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}
];
setTimeout(() => {
resolve(categriesData);
},3000);
});
}
async function getDataProcess(){
showLoadingImg();
try{
return await getData();
}catch(e){
console.error(e.message);
}finally{
removeLoadingImg();
}
}
async function showCategoriesList(){
const result = await getDataProcess();
const fragment = document.createDocumentFragment();
for(const list of result){
const li = document.createElement('li');
const a = document.createElement('a');
const img = document.createElement('img');
a.textContent = list.text;
a.href = `/${list.to}`;
img.src = list.img;
img.alt = list.alt;
fragment.appendChild(li).appendChild(a).appendChild(img);
}
document.getElementById('js-list').appendChild(fragment);
}
showCategoriesList();今回学んだこと
- try-catch-finallyの使い方
- 例外処理について
次回も頑張ります！
私が所属しているフロントエンドエンジニアを目指す方のための塾 「もりけん塾」の森田賢二先生のTwitterはこちら！
【募集】フロントエンド、とりわけJavaScriptを教えてもらいたい塾生を募集しています。条件はありますが、お金は頂きません。詳しくはDMください#JavaScript教えてもらいたい方#駆け出しのエンジニアと繋がりたい
— フロントエンドエンジニア (@terrace_tech) April 18, 2020
わたしについて👉https://t.co/FETVmMT5AY
先生のブログ「武骨日記」はこちら！
