Datenabruf in React mit React Async

Sie sind es wahrscheinlich gewohnt, Daten in React mit axios oder fetch abzurufen. Die übliche Methode zur Verarbeitung von Datenabrufen ist:

• Den API-Aufruf machen.
• Den Zustand mit der Antwort aktualisieren, wenn alles nach Plan läuft.
• Oder, in Fällen, in denen Fehler auftreten, wird dem Benutzer eine Fehlermeldung angezeigt.

Bei der Bearbeitung von Netzwerkanfragen wird es immer zu Verzögerungen kommen. Das gehört einfach dazu, wenn man eine Anfrage stellt und auf eine Antwort wartet. Deshalb verwenden wir oft einen Lade-Spinner, um dem Benutzer zu zeigen, dass die erwartete Antwort geladen wird.

Siehe den Pen
ojRMaN von Geoff Graham (@geoffgraham)
auf CodePen.

All dies kann mit einer Bibliothek namens React Async erreicht werden.

React Async ist eine Promise-basierte Bibliothek, die es Ihnen ermöglicht, Daten in Ihrer React-Anwendung abzurufen. Betrachten wir verschiedene Beispiele mit Komponenten, Hooks und Helfern, um zu sehen, wie wir Ladezustände beim Stellen von Anfragen implementieren können.

Für dieses Tutorial werden wir Create React App verwenden. Sie können ein Projekt erstellen, indem Sie Folgendes ausführen:

npx create-react-app react-async-demo

Wenn dies geschehen ist, führen Sie den Befehl aus, um React Async mit yarn oder npm in Ihr Projekt zu installieren

## yarn
yarn add react-async

## npm
npm install react-async --save

Beispiel 1: Ladeindikatoren in Komponenten

Die Bibliothek ermöglicht es uns, <Async> direkt in unserem JSX zu verwenden. Daher wird das Komponentenbeispiel wie folgt aussehen;

// Let's import React, our styles and React Async
import React from 'react';
import './App.css';
import Async from 'react-async';

// We'll request user data from this API
const loadUsers = () =>
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())

// Our component
function App() {
  return (
    <div className="container">
      <Async promiseFn={loadUsers}>
        {({ data, err, isLoading }) => {
          if (isLoading) return "Loading..."
          if (err) return `Something went wrong: ${err.message}`

          if (data)
            return (
              <div>
                <div>
                  <h2>React Async - Random Users</h2>
                </div>
                {data.map(user=> (
                  <div key={user.username} className="row">
                    <div className="col-md-12">
                      <p>{user.name}</p>
                      <p>{user.email}</p>
                    </div>
                  </div>
                ))}
              </div>
            )
        }}
      </Async>
    </div>
  );
}

export default App;

Zuerst haben wir eine Funktion namens loadUsers erstellt. Diese wird den API-Aufruf mit der Fetch API durchführen. Und wenn sie dies tut, gibt sie ein Promise zurück, das aufgelöst wird. Danach werden die benötigten Props der Komponente zur Verfügung gestellt.

Die Props sind

• isLoading: Dies behandelt Fälle, in denen die Antwort vom Server noch nicht empfangen wurde.
• err: Für Fälle, in denen ein Fehler auftritt. Sie können dies auch in error umbenennen.
• data: Dies sind die erwarteten Daten, die vom Server erhalten wurden.

Wie Sie im Beispiel sehen können, geben wir abhängig von der Prop etwas zurück, das dem Benutzer angezeigt werden soll.

Beispiel 2: Ladeindikatoren in Hooks

Wenn Sie ein Fan von Hooks sind (wie Sie es sein sollten), gibt es eine Hook-Option, wenn Sie mit React Async arbeiten. Hier ist, wie das aussieht:

// Let's import React, our styles and React Async
import React from 'react';
import './App.css';
import { useAsync } from 'react-async';

// Then we'll fetch user data from this API
const loadUsers = async () =>
  await fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())

// Our component
function App() {
  const { data, error, isLoading } = useAsync({ promiseFn: loadUsers })
  if (isLoading) return "Loading..."
  if (error) return `Something went wrong: ${error.message}`
  if (data)
  
  // The rendered component
  return (
    <div className="container">
      <div>
        <h2>React Async - Random Users</h2>
      </div>
      {data.map(user=> (
        <div key={user.username} className="row">
          <div className="col-md-12">
            <p>{user.name}</p>
            <p>{user.email}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default App;

Dies sieht dem Komponentenbeispiel ähnlich, aber in diesem Szenario verwenden wir useAsync und nicht die Async-Komponente. Die Antwort gibt ein Promise zurück, das aufgelöst wird, und wir haben auch Zugriff auf ähnliche Props wie im letzten Beispiel, mit denen wir dann zur gerenderten Benutzeroberfläche zurückkehren können.

Beispiel 3: Ladeindikatoren in Helfern

Hilfskomponenten sind nützlich, um unseren Code übersichtlich und lesbar zu machen. Diese Helfer können bei der Arbeit mit einem useAsync Hook oder einer Async-Komponente verwendet werden, die wir gerade betrachtet haben. Hier ist ein Beispiel für die Verwendung der Helfer mit der Async-Komponente.

// Let's import React, our styles and React Async
import React from 'react';
import './App.css';
import Async from 'react-async';

// This is the API we'll use to request user data
const loadUsers = () =>
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())

// Our App component
function App() {
  return (
    <div className="container">
      <Async promiseFn={loadUsers}>
          <Async.Loading>Loading...</Async.Loading>
          <Async.Fulfilled>
            {data => {
              return (
                <div>
                  <div>
                    <h2>React Async - Random Users</h2>
                  </div>
                  {data.map(user=> (
                    <div key={user.username} className="row">
                      <div className="col-md-12">
                        <p>{user.name}</p>
                        <p>{user.email}</p>
                      </div>
                    </div>
                  ))}
                </div>
              )
            }}
          </Async.Fulfilled>
          <Async.Rejected>
            {error => `Something went wrong: ${error.message}`}
          </Async.Rejected>
      </Async>
    </div>
  );
}

export default App;

Dies sieht ähnlich aus wie bei der Verwendung von Props. Wenn dies geschehen ist, könnten Sie die verschiedenen Abschnitte der Anwendung in winzige Komponenten aufteilen.

Fazit

Wenn Sie es leid sind, den Weg zu gehen, den ich im einleitenden Abschnitt dieses Tutorials erwähnt habe, können Sie React Async in Ihrem Projekt verwenden. Der in diesem Tutorial verwendete Quellcode ist in verschiedenen Zweigen auf GitHub zu finden.