Как провести рефакторинг с обещанием в 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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(), но я думаю, вы поняли.

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