Fetching Data in React using React Async

This tutorial demonstrates efficient data fetching in React applications using the react-async library, offering a streamlined alternative to traditional axios or fetch methods. Instead of manually managing loading states and error handling, react-async simplifies the process.

The standard approach to data fetching involves making an API call, updating the state with the response (or displaying an error message), and incorporating a loading indicator to manage network delays. react-async elegantly handles all these aspects.

We'll explore three examples using components, hooks, and helpers to illustrate loading state implementation during data requests. This tutorial uses Create React App. Begin by creating a project:

npx create-react-app react-async-demo

Next, install react-async:

# yarn
yarn add react-async

# npm
npm install react-async --save

Example 1: Loaders within Components

The <async></async> component directly integrates into JSX:

import React from 'react';
import './App.css';
import Async from 'react-async';

const loadUsers = () =>
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json());

function App() {
  return (
    <div classname="container">
      <async promisefn="{loadUsers}">
        {({ data, err, isLoading }) => {
          if (isLoading) return "Loading...";
          if (err) return `Error: ${err.message}`;
          if (data)
            return (
              <div>
                <h2 id="React-Async-User-Data">React Async - User Data</h2>
                {data.map(user => (
                  <div classname="row" key="{user.id}">
                    <div classname="col-md-12">
                      <p>{user.name}</p>
                      <p>{user.email}</p>
                    </div>
                  </div>
                ))}
              </div>
            );
        }}
      </async>
    </div>
  );
}

export default App;

The Async component provides isLoading, err (or error), and data props. The component renders different content based on these props.

Example 2: Loaders with Hooks

For hook enthusiasts, useAsync provides a similar functionality:

import React from 'react';
import './App.css';
import { useAsync } from 'react-async';

const loadUsers = async () =>
  await fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json());

function App() {
  const { data, error, isLoading } = useAsync({ promiseFn: loadUsers });
  if (isLoading) return "Loading...";
  if (error) return `Error: ${error.message}`;
  if (data)
    return (
      // ... (same rendering as Example 1) ...
    );
}

export default App;

useAsync returns the same isLoading, error, and data values, simplifying state management.

Example 3: Loaders with Helpers

Helper components enhance code readability:

import React from 'react';
import './App.css';
import Async from 'react-async';

const loadUsers = () =>
  // ... (same fetch function as Example 1) ...

function App() {
  return (
    <div classname="container">
      <async promisefn="{loadUsers}">
        <async.loading>Loading...</async.loading>
        <async.fulfilled>
          {data => (
            // ... (same rendering as Example 1) ...
          )}
        </async.fulfilled>
        <async.rejected>
          {error => `Error: ${error.message}`}
        </async.rejected>
      </async>
    </div>
  );
}

export default App;

This approach uses <async.loading></async.loading>, <async.fulfilled></async.fulfilled>, and <async.rejected></async.rejected> for clearer separation of loading, success, and error states.

Conclusion

react-async streamlines data fetching in React, simplifying loading state management and error handling. Choose the approach (components, hooks, or helpers) that best suits your coding style. The source code for these examples can be found on GitHub (link to be provided if available).

The above is the detailed content of Fetching Data in React using React Async. For more information, please follow other related articles on the PHP Chinese website!