1. fetchを使わない
JavaScriptでAPI(JSON)を取得する際にfetchを使用しているケースがありますが、fetchはresponse.okの判定を書き忘れてエラーが出ないバグを発生しやすいのでオススメしません。
JavaScript
const getUserBtn = document.getElementById('getUserBtn')
const result = document.getElementById('result')
const fetchUserData = async () => {
const getUserBtnName = getUserBtn.textContent
getUserBtn.disabled = true
getUserBtn.textContent = 'ロード中'
try {
const response = await fetch('https://dummyjson.com/users/1')
const data = await response.json()
if (!response.ok) throw new Error(data.message)
result.textContent = data.firstName
} catch (error) {
console.error(error)
result.textContent = error.message
} finally {
getUserBtn.textContent = getUserBtnName
getUserBtn.disabled = false
}
}
getUserBtn.addEventListener('click', () => fetchUserData())JavaScriptでAPI(JSON)をfetchで取得するサンプル
試しに「users/error」にして「if (!response.ok)」の行をコメントアウトして実行してみてください。
「if (!response.ok)」の判定がないとエラーメッセージが表示されません。
axiosを使用すると以下のようになり、冗長だったコードがスッキリしています。
JavaScript
import axios from 'axios'
const getUserBtn = document.getElementById('getUserBtn')
const result = document.getElementById('result')
const fetchUserData = async () => {
const getUserBtnName = getUserBtn.textContent
getUserBtn.disabled = true
getUserBtn.textContent = 'ロード中'
try {
const response = await axios.get('https://dummyjson.com/users/1')
result.textContent = response.data.firstName
} catch (error) {
console.error(error)
result.textContent = error.response.data.message
} finally {
getUserBtn.textContent = getUserBtnName
getUserBtn.disabled = false
}
}
getUserBtn.addEventListener('click', () => fetchUserData())2. finallyを省略しない
try…catch 文を書く際にfinallyを書かずに以下のように書いているコードをたまに見かけます。
JavaScript
const fetchUserData = async () => {
const getUserBtnName = getUserBtn.textContent
getUserBtn.disabled = true
getUserBtn.textContent = 'ロード中'
try {
const response = await axios.get('https://dummyjson.com/users/1')
result.textContent = response.data.firstName
} catch (error) {
console.error(error)
result.textContent = error.response.data.message
}
getUserBtn.textContent = getUserBtnName
getUserBtn.disabled = false
}これだとtry…catch 文のエラー時にコードが動作しないことがあり、コードの見た目も成功でも失敗でも行うべき処理であることがわかりにくくなるので、必ずfinallyで書くべきです
3. thenで書かない
下記のコードのようにthenでコードを書くと、try…catch 文とasync、awaitを使用するのに比べてコードの可読性が悪くなります。
これに別途awaitの関数を追記すると更に悪化します。
最近はthenではなくasync と awaitを使用するの定石なので、使用は控えたほうが良いでしょう。
JavaScript
const fetchUserData = () => {
const getUserBtnName = getUserBtn.textContent
getUserBtn.disabled = true
getUserBtn.textContent = 'ロード中'
axios.get('https://dummyjson.com/users/1')
.then((response) => {
result.textContent = response.data.firstName
})
.catch((error) => {
console.error(error)
result.textContent = error.response.data.message
})
.finally(() => {
getUserBtn.textContent = getUserBtnName
getUserBtn.disabled = false
})
}JavaScriptでAPI(JSON)をaxiosで取得するサンプル
