Как провести рефакторинг с обещанием в React?

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)
    }
  }

Так что читайте об обещаниях: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… + ищите в Интернете больше

Alan H. 23.04.2022 08:16

Вы уже используете промисы. Каждая функция, которую вы помечаете как async, возвращает промис, и вы можете использовать Толькоawait для промисов. Использование await для чего-либо, кроме промисов, либо не делает того, что вы думаете, либо вообще ничего не делает. Если вы используете async/await, не зная, что такое промисы, вы должны остановиться и сначала узнать, что такое промисы.

slebetman 23.04.2022 08:22
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
2
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Рефакторинг — это искусство разбивать функции на более мелкие единицы. Основная идея заключается в том, чтобы сделать функцию «очевидной», сделав ее маленькой, чтобы ошибки также становились очевидными. Вам действительно не нужно знать ничего, кроме того, как работают функции.

Первая часть, которую я бы выделил, — это 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(), но я думаю, вы поняли.

Другие вопросы по теме