Visual Studio Code 建議重構代碼以降低復雜性。我不知道 Promise 是什么以及如何重構下面的代碼。誰能幫我？
const handleLoadInventory = async () => {
try {
const _data = await fetch('http://localhost:4000/api/v1/inventory/', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' localStorage.getItem('token'),
},
})
if (_data.status === 200) {
const data = await _data.json()
if (data.items.length !== 0) {
if (inventoryData.length)
for (let i = 1; i <= Math.ceil(data.items.length / 10); i ) {
pagination.push(i)
}
for (let i = 0; i < 10 && i < data.items.length; i ) {
showData.push(data.items[i])
}
setInventoryData(data.items)
} else {
setZeroAlert(true)
}
} else {
setServerAlert(true)
throw new Error()
}
} catch (err) {
setServerAlert(true)
console.error(err)
}
}
uj5u.com熱心網友回復：
重構是將功能分解成更小的單元的藝術。它背后的關鍵思想是通過使函式變小來使函式“顯而易見”，從而使錯誤也變得明顯。除了函式是如何作業的，你真的不需要知道更多的東西。
我要提取的第一部分是fetch因為您可能會多次使用它。復制/粘貼您擁有的獲取代碼很容易出錯。您可能忘記設定其內容型別，或者您可能忘記包含身份驗證令牌。
因此它應該被做成它自己的函式，而不僅僅是一段代碼：
// This function returns a promise because fetch returns a promise:
function get (url) {
return fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' localStorage.getItem('token'),
},
})
}
接下來是處理狀態碼 200。您正在使用一個if塊。這意味著確保所有獲取資料的函式都具有相同的結構。由于復制/粘貼編程，它再次容易出錯。
由于您正在設定狀態并引發錯誤，因此您可以在get()上面的函式中處理它：
// This function returns a promise because fetch returns a promise:
async function get (url) {
let response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' localStorage.getItem('token'),
},
})
if (response.status !== 200) {
throw new Error('Server response invalid')
}
return response
}
由于我們拋出錯誤，因此setServerAlert()將由您的外部 try/catch 塊處理。
現在您的代碼已大大簡化：
const handleLoadInventory = async () => {
try {
const _data = await get('http://localhost:4000/api/v1/inventory/')
const data = await _data.json()
if (data.items.length !== 0) {
if (inventoryData.length)
for (let i = 1; i <= Math.ceil(data.items.length / 10); i ) {
pagination.push(i)
}
for (let i = 0; i < 10 && i < data.items.length; i ) {
showData.push(data.items[i])
}
setInventoryData(data.items)
} else {
setZeroAlert(true)
}
} catch (err) {
setServerAlert(true)
console.error(err)
}
}
就我個人而言，我什至會將_data.json()部分移到get()函式中，但我認為你明白了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/462206.html
標籤：javascript 反应 承诺