React Suspense برای واکشی داده با Axios در React 18

در این پست وبلاگ، React Suspense چیست و چگونه می توان از آن برای واکشی داده در React 18 استفاده کرد.

React Suspense برای مدت طولانی در حال ساخت بوده است، اما اکنون به عنوان بخشی از ویژگی پایدار Concurrent React منتشر شده است و از موتور رندر Concurrent جدید منتشر شده در React 18 استفاده می کند.

تعلیق اجازه می‌دهد تا زمانی که مؤلفه فرزند بارگیری داده‌ها را به پایان برساند، یک مؤلفه بازگشتی نمایش داده شود.

بیایید برنامه ای بسازیم که از Suspense به همراه Axios برای واکشی داده ها از API jsonplaceholder برای نمایش لیستی از پست ها استفاده کند.

Dead Simple Chat به شما این امکان را می دهد تا با استفاده از ابزار قدرتمند، چت را در برنامه های React خود اضافه کنید JavaScript Chat API و SDK. با Dead Simple Chat می توانید در عرض چند دقیقه چت را به برنامه خود اضافه کنید.

مرحله 1: برنامه React خود را داربست کنید

ما استفاده خواهیم کرد create-react-app برای داربست برنامه ما، ترمینال را باز کنید و cd در دایرکتوری که می خواهید برنامه را داربست کنید و دستور زیر را اجرا کنید:

npx create-react-app react-suspense-demo
cd react-suspense-demo

مرحله 2: Axios را نصب کنید

در مرحله بعد، برای استفاده از Axios در برنامه خود، بسته Axios را با استفاده از npm install نصب می کنیم.

npm install --save axios

مرحله 3: یک قلاب سفارشی برای Suspense ایجاد کنید

ابتدا یک متد کاربردی ایجاد می کنیم تا درخواست Axios را برای کار با React Suspense بپیچید.

یک فایل در زیر ایجاد کنید src/ پوشه به نام useGetData.js که حاوی کد قلاب سفارشی ما خواهد بود.

// src/useGetData.js
import { useState, useEffect } from "react";
import axios from "axios";

const promiseWrapper = (promise) => {
  let status = "pending";
  let result;

  const s = promise.then(
    (value) => {
      status = "success";
      result = value;
    },
    (error) => {
      status = "error";
      result = error;
    }
  );

  return () => {
    switch (status) {
      case "pending":
        throw s;
      case "success":
        return result;
      case "error":
        throw result;
      default:
        throw new Error("Unknown status");
    }
  };
};

function useGetData(url) {
  const [resource, setResource] = useState(null);

  useEffect(() => {
    const getData = async () => {
      const promise = axios.get(url).then((response) => response.data);
      setResource(promiseWrapper(promise));
    };

    getData();
  }, [url]);

  return resource;
}

export default useGetData;

ما یک متد کاربردی به نام the ایجاد کردیم promiseWrapper برای بسته بندی درخواست Axios، و سپس ایجاد یک قلاب سفارشی به نام as useGetData که در اجزای خود برای ارسال درخواست های HTTP Get با استفاده از Axios استفاده خواهیم کرد.

قلاب از یک متغیر حالت به نام the استفاده می کند resource برای ذخیره منابعی که پس از بستن وعده Axios به دست می آوریم promiseWrapper روش.

ما promiseWrapper متد زمانی که فراخوانی می شود تابعی را برمی گرداند و کیس سوئیچ را در وضعیت فعلی وعده اجرا می کند و بر این اساس برمی گرداند:

• pending – در صورتی که مقام قول باشد pending سپس خود قول را برمی گرداند. این باعث می شود که React Suspense مؤلفه بازگشتی را فعال کند.

• success– اگر وضعیت قول اگر success سپس مقدار بازگشتی پس از حل و فصل وعده را برمی گرداند.

• error – در صورتی که مقام قول باشد error سپس خطا می دهد

مرحله 4: ایجاد PostsComponet برای نمایش لیستی از پست ها

حالا یک را ایجاد می کنیم PostsComponet که از قلاب سفارشی ما استفاده می کند و با آن تماس می گیرد jsonplaceholder.typicode.com/posts API برای واکشی لیستی از پست های ساختگی.

// src/PostsComponent.js
import React from "react";
import useGetData from "./useGetData";

function PostsComponent() {
  const data = useGetData("https://jsonplaceholder.typicode.com/posts");

  return (
    <div>
      {data &&
        data.map((post) => (
          <div key={post.id}>
            <h2>{post.title}</h2>
            <hr />
            <p>{post.body}</p>
          </div>
        ))}
    </div>
  );
}

export default PostsComponent;

این جزء بسیار ساده است، ما به قلاب سفارشی خود می گوییم useGetData و به آن یک URL نقطه پایانی برای واکشی لیست پست ها می دهیم.

انتساب نتیجه از هوک سفارشی به متغیری به نام as data و نمایش آن بر روی صفحه نمایش

مرحله 5: کامپوننت Posts خود را در حالت تعلیق قرار دهید

در نهایت، زمان استفاده از PostsComponent در برنامه باز است App.js و کد زیر را به فایل اضافه کنید:

// src/App.js
import React, { Suspense } from "react";
import PostsComponent from "./PostsComponent";

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading Posts...</div>}>
        <PostsComponent />
      </Suspense>
    </div>
  );
}

export default App;

ما در حال اضافه کردن هستیم <PostsComponent /> به عنوان یک کودک به <Suspense fallback={}></Suspense> جزء.

جزء Suspense دارای یک است fallback= prop، در اینجا می‌توانید مؤلفه‌ای را که می‌خواهید نمایش دهید تا زمانی که مؤلفه فرزند بارگذاری شود، ارسال کنید.

در مثال خود، ما فقط div اساسی را نشان می دهیم که متن “بارگیری پست ها…”

نمونه کار را می توانید اینجا ببینید

مرحله 6: همین

نحوه استفاده را دیده ایم Suspense برای واکشی داده ها در React 18، امیدوارم مثال بالا برای درک نحوه استفاده از Suspense جزء.

اضافه کردن تاخیر در بارگیری پست

برای اینکه به وضوح نشان دهیم که Suspense ما کار می کند، می توانیم a اضافه کنیم setTimeout در ما promiseWrapper

const promiseWrapper = (promise, delay = 3000) => {
  let status = "pending";
  let result;

  const s = promise
    .then((value) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          status = "success";
          result = value;
          resolve(value);
        }, delay);
      });
    })
    .catch((error) => {
      status = "error";
      result = error;
    });

  return () => {
    switch (status) {
      case "pending":
        throw s;
      case "success":
        return result;
      case "error":
        throw result;
      default:
        throw new Error("Unknown status");
    }
  };
};

و ما نیز خود را به روز خواهیم کرد App.js فایل و اضافه شد LoadingScreen کامپوننت برای نمایش پیام در حال بارگذاری

// src/App.js
import React, { Suspense } from "react";
import PostsComponent from "./PostsComponent";

function LoadingScren() {
  return (
    <div>
      <h1>Loading Posts</h1>
      <h3>loading amazing posts for you to read</h3>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <Suspense fallback={<LoadingScren />}>
        <PostsComponent />
      </Suspense>
    </div>
  );
}

export default App;

این نتیجه نهایی است:

می توانید نمونه کار را اینجا ببینید

مقایسه بدون استفاده از تعلیق

بیایید همچنین ببینیم اگر از React Suspense استفاده نمی کردیم کد ما چگونه به نظر می رسید.

ما از ترکیبی استفاده می کردیم useEffect و useState برای دستیابی به نتایج مشابه

کد ما PostComponent.js به این شکل خواهد بود:

// src/PostsComponent.js

import React, { useEffect, useState } from "react";
import axios from "axios";

function PostsComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    async function fetchPosts() {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      setIsLoading(false);
      setData(response.data);
    }
    fetchPosts();
  }, []);

  if (isLoading) {
    return <div>Loading Posts...</div>;
  }

  return (
    <div>
      {data &&
        data.map((post) => (
          <div key={post.id}>
            <h2>{post.title}</h2>
            <hr />
            <p>{post.body}</p>
          </div>
        ))}
    </div>
  );
}

export default PostsComponent;

ما استفاده کرده ایم useEffect قلاب برای برقراری فراخوانی API برای واکشی لیست پست ها و تنظیم نتیجه در یک متغیر حالت که نمایش خواهیم داد.

برای مدیریت وضعیت بارگذاری، یک متغیر حالت به نام as ایجاد کرده ایم isLoading و ما آن را تنظیم می کنیم true به طور پیش فرض، پس از بارگیری پست ها، ما در حال به روز رسانی پست ها هستیم isLoading متغیر حالت به false.

استفاده كردن SDK چت جاوا اسکریپت، چت درون برنامه ای را در چند دقیقه در برنامه React خود یکپارچه کنید. Dead Simple Chat یک راه حل چت بسیار مقیاس پذیر است که می تواند برای هر مورد استفاده از چت استفاده شود.

ارائه خطاها در حالت تعلیق با مرزهای خطا

React Suspense پشتیبانی می کند ErrorBoundaries، می توانیم بسته بندی کنیم Suspense جزء در یک ErrorBoundary و خطای پرتاب شده توسط مؤلفه کودک تعلیق به خوبی توسط ErrorBoundary جزء.

بیایید مثال خود را برای استفاده به روز کنیم ErrorBoundary.

یک فایل به نام as ایجاد کنید src/ErrorBoundary.js برای نگه داشتن ما ErrorBoundary جزء:

import { Component } from "react";

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Report the Error to Some Error Reporting Service.
    console.error("Error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

را ErrorBoundary فقط می تواند یک جزء کلاس باشد، سایر مؤلفه های برنامه ما می توانند اجزای عملکردی باشند، اما فقط مؤلفه ErrorBoundary باید جزء کلاس باشد زیرا روش های چرخه حیات، componentDidCatch و getDerviedStateFromError در اجزای عملکردی موجود نیستند.

ما ErrorBoundary جزء الف را می پذیرد fallback prop که با تشخیص خطا برگردانده می شود.

ما می توانیم یک جزء را به fallback prop و آن کامپوننت در صورت بروز خطا نمایش داده می شود.

در نهایت، ما به روز رسانی خود را App.js کد برای استفاده از ما ErrorBoundary جزء:

// App.js
import React, { Suspense } from "react";
import ErrorBoundary from "./ErrorBoundary";
import PostsComponent from "./PostsComponent";

function LoadingScren() {
  return (
    <div>
      <h1>Loading Posts</h1>
      <h3>loading amazing posts for you to read</h3>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <ErrorBoundary fallback={<div>Error Occurred when loading Post..</div>}>
        <Suspense fallback={<LoadingScren />}>
          <PostsComponent />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default App;

خودشه! اکنون هنگامی که یک خطای شبکه هنگام بارگذاری پست ها رخ می دهد، ErrorBoundary ما آن را مدیریت می کند و جزء بازگشتی ما را که یک تگ div است با یک پیام نمایش می دهد.

نتیجه

امیدواریم این پست برای درک مفهوم React Suspense مفید بوده باشد. ما به نمونه ای از نحوه استفاده از React Suspense با Axios برای واکشی داده ها نگاه کرده ایم.

ما همچنین به مثالی نگاه کردیم که چگونه می‌توانیم واکشی داده‌ها را بدون استفاده از Suspense انجام دهیم و به نمونه‌ای از مدیریت خطا با استفاده از Suspense نگاه کردیم.

این مقاله در ابتدا در وب سایت DeadSimpleChat نوشته شده است: React Suspense برای واکشی داده با Axios در React 18