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)
}
}
Вы уже используете промисы. Каждая функция, которую вы помечаете как async
, возвращает промис, и вы можете использовать Толькоawait
для промисов. Использование await
для чего-либо, кроме промисов, либо не делает того, что вы думаете, либо вообще ничего не делает. Если вы используете async/await
, не зная, что такое промисы, вы должны остановиться и сначала узнать, что такое промисы.
Рефакторинг — это искусство разбивать функции на более мелкие единицы. Основная идея заключается в том, чтобы сделать функцию «очевидной», сделав ее маленькой, чтобы ошибки также становились очевидными. Вам действительно не нужно знать ничего, кроме того, как работают функции.
Первая часть, которую я бы выделил, — это 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()
, но я думаю, вы поняли.
Так что читайте об обещаниях: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… + ищите в Интернете больше