Управление запросами API Fetch в React.js

Fetch + Abort Controller + тайм -ауты + React.js

window.fetch это потрясающе, но ему не хватает тайм -аутов. Вы не можете просто предоставить значение в миллисекундах и ожидать, что запрос Fetch будет прерван, если в течение этого срока нет ответа.

// This timeouts after 3000s, stops listening for a response from the server.
fetch('https://your-url.com', {
  timeoutDuration: 3000
})

// THIS DOES NOT EXIST

Что -то подобное было бы здорово! Но этого не существует.

У нас, как веб -разработчиков, есть решение для этого, то есть AbortController. Хотя мы не можем пройти продолжительность тайм -аута, мы можем передать сигнал и отменить выборку. Итак, допустим, мы хотим установить продолжительность 1 секунды, после чего наш запрос на выброс прерывает. Вот как мы это делали:

const controller = new AbortController()
const signal = controller.signal

fetch('https://abc.xyz', { signal })

// Abort the fetch request after 1s
setTimeout(() => contoller.abort(), 1000)

Это прекрасно, если просто захотите отправить запросы, но когда вы пытаетесь использовать что -то подобное с помощью компонента React, на котором показан какой -то пользовательский интерфейс, указывающий текущее состояние запроса, вы можете представить себе беспорядок, который может сделать новый разработчик. Допустим, у компонента есть кнопка и текст. 3 штата:

Текст: готово, кнопку: нажатием
Текст: ожидание/загрузка, кнопка: отключена, показывает прядильщик
Текст: Загрузка завершена, кнопка: нажатием

Как бы вы это сделали? Разместите свои решения в комментариях ниже. Я хотел бы иметь что -то вроде:

const { data, loading, error, send } = useSomething(fetchParameters)

Правильно, я не буду тратить секунду, прежде чем абстрагировать беспорядок от компонента. Я также ожидаю, что эти значения обновится в режиме реального времени, чтобы я мог использовать их для обновления своего компонента.

Для тех, кто черный ремень в React-Foo и уже выяснил это, он доступен на NPM:

React-Confetch

Я также планирую добавить его в качестве пакета GitHub в ближайшее время.

Если вы новичок в реагировании, вот шаги настройки:

Добавьте пакет в качестве зависимости в ваш проект:

npm install --save react-confetch

Оберните компонент вашего приложения ConfetchContext как это:

import './index.css'

import { ConfetchContext } from 'react-confetch'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

const globalFetchConfig = {
  timeoutDuration: 3000,
}

ReactDOM.render((
  
    
  
), document.getElementById('root'))

Обратите внимание на GlobalFetchConfig ? Именно здесь вы добавили бы все значения конфигурации по умолчанию для всех запросов, сделанных с использованием этого пакета. Используйте USECONFETCH подключить в свои компоненты, как это:

-app.js
import React from 'react'
import { useConfetch } from 'react-confetch'

const App = () => {
  const convertResponseToImageData = res => res.blob().then(image => URL.createObjectURL(image))

  const config = {
    url: 'https://avatars.githubusercontent.com',
    endpoint: '/akshay-nm',
    body: null,
    method: 'GET',
    timeoutDuration: 10,
    onResponse: convertResponseToImageData, // this is where you add logic to handle the response, any return value will be set as data
    // onError: err => {}, // you can pass an error handler too, any return values will be assigned to error
    // any error thrown is returned as error
  }

  const { data, loading, error, send } = useConfetch(config)

  return (
    
      {data && }
      loading: {loading? 'yes' : 'no'}
      error: {error? error.message: '-'}
      
        
      
    
  )
}

export default App

Это просто обертка во всей функциональности, о которой мы говорили ранее. Я добавлю несколько примеров о том, как обернуть этот крюк для каждой конечной точки, к которой вы хотите получить доступ, так как компонент все еще имеет дополнительный код, который можно перемещать в другом месте. Если вы делаете то же самое, поделитесь некоторыми из этого вдохновляющего кода! До следующего раза…

Оригинал: “https://dev.to/akshay_nm/managing-fetch-api-requests-in-react-js-useconfetch-1kl7”

React-Confetch

Читайте ещё по теме: