Простой пример асинхронной операции используя netcore и react.

Давайте сегодня создадим простого примера асинхронной операции с таймаутом и значком ожидания на фронте, используя .NET Core для backend и React с Material-UI (MUI), Axios и React Spinners для frontend.

Следуйте этим шагам:

Backend (.NET Core)
 

1. Создайте новый проект .NET Core API:

dotnet new webapi -n AsyncApi
cd AsyncApi

2. Добавьте контроллер с асинхронной операцией:
Создайте файл AsyncController.cs в папке Controllers:

using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
namespace AsyncApi.Controllers
{
   [Route("api/[controller]")]
   [ApiController]
   public class AsyncController : ControllerBase
   {
       [HttpGet("long-operation")]
       public async Task<IActionResult> LongOperation()
       {
           await Task.Delay(5000); // Симуляция долгой операции
           return Ok("Operation completed!");
       }
   }
}

3. Запустите API:

dotnet run

Frontend (React + MUI + Axios + React Spinners)

1. Создайте новый проект React:

npx create-react-app async-frontend
cd async-frontend

2. Установите необходимые пакеты:

npm install @mui/material @emotion/react @emotion/styled axios react-spinners

3. Создайте компонент с асинхронной операцией:

Создайте файл AsyncComponent.js в папке src:

import React, { useState } from 'react';
import axios from 'axios';
import { Button, Typography } from '@mui/material';
import { ClipLoader } from 'react-spinners';
const AsyncComponent = () => {
 const [loading, setLoading] = useState(false);
 const [result, setResult] = useState(null);
 const handleClick = async () => {
   setLoading(true);
   setResult(null);
   try {
     const response = await axios.get('http://localhost:5000/api/async/long-operation', {
       timeout: 10000, // Таймаут 10 секунд
     });
     setResult(response.data);
   } catch (error) {
     setResult('Operation failed or timed out.');
   } finally {
     setLoading(false);
   }
 };
 return (
   <div>
     <Button variant="contained" onClick={handleClick} disabled={loading}>
       Start Operation
     </Button>
     {loading && <ClipLoader size={50} color="#36d7b7" />}
     {result && <Typography variant="h6">{result}</Typography>}
   </div>
 );
};
export default AsyncComponent;

4. Используйте компонент в вашем приложении:

Отредактируйте файл src/App.js:

import React from 'react';
import AsyncComponent from './AsyncComponent';
function App() {
 return (
   <div className="App">
     <AsyncComponent />
   </div>
 );
}
export default App;

5. Запустите React приложение:

npm start

Объяснение

Backend (.NET Core): Контроллер AsyncController содержит метод LongOperation, который симулирует долгую операцию с помощью Task.Delay(5000).

Frontend (React): Компонент AsyncComponent использует Axios для выполнения HTTP-запроса к backend. Во время выполнения запроса отображается значок ожидания с помощью ClipLoader из библиотеки react-spinners. Если операция завершается успешно, результат отображается на экране. Если операция завершается с ошибкой или таймаутом, отображается сообщение об ошибке.

Теперь у вас есть простой пример асинхронной операции с таймаутом и значком ожидания на фронте, используя .NET Core, React, MUI, Axios и React Spinners.