5 ستون هر درخواست HTTP – انجمن DEV

درخواست

درخواست یا درخواست HTTP عملی است که به منظور دریافت چیزی یا ارسال اطلاعات به سرور ارسال می شود. این شامل URL سرور، سرصفحه ها و بدنه درخواست است.

بیشتر مواردی که توضیح داده خواهد شد برای درخواست برخی اطلاعات مهم است، اما می تواند هنگام ارسال اطلاعات نیز به کار رود.

بارگذاری

نمایش اطلاعات بارگیری برای کاربران شما یک مرحله مهم از یک درخواست است زیرا ما هرگز نمی دانیم چه اتفاقی ممکن است در شبکه بیفتد، شاید اتصال کند است، شاید سرور به دلیل درخواست های متعدد کند شده است.

نمایش یک لودر یا متنی که نشان می‌دهد درخواست هنوز در حال انجام است، یک مرحله اضافی است که می‌تواند برنامه شما را حرفه‌ای‌تر جلوه دهد و کاربرپسندتر از تصور اینکه همه به اینترنت سریع متصل هستند، باشد.

می توانید درخواست کند شده از کنسول برنامه نویس را در مرورگر مورد علاقه خود مانند فایرفاکس یا گوگل کروم شبیه سازی کنید.

خطا

چیزهایی در شبکه اتفاق می‌افتد و ما نمی‌توانیم همه چیز را در کنار آنچه در کدمان اتفاق می‌افتد کنترل کنیم.

ممکن است شبکه به‌طور لحظه‌ای خاموش شود یا کاربر حالت هواپیما را فعال کرده باشد یا سرور برای مدتی از کار افتاده باشد. ما هرگز نمی دانیم که چه نوع مشکلی ممکن است وجود داشته باشد، یا چه زمانی ممکن است اتفاق بیفتد، اما می دانیم که ممکن است مشکلی وجود داشته باشد و باید آن را حساب کنیم.

در نظر گرفتن این موارد در کد، به خصوص در جاوا اسکریپت، تمرین خوبی است زیرا ارسال یک درخواست اغلب شامل استفاده از Promise است و ممکن است یک وعده در حالت رد شود.

همچنین می توانید یک اتصال آفلاین را در مرورگر خود از Developer Console شبیه سازی کنید.

قابل لغو

اگر قصد دارید داده‌های کاربران خود را از یک API راه دور بدهید، حداقل راهی برای لغو این درخواست‌ها ارائه دهید.

این یک تمرین خوب و یک تجربه کاربری اضافه شده در هر برنامه ای است، زیرا دریافت بار عظیم از یک سرور راه دور ممکن است برای کاربرانی که در برنامه های داده هستند پرهزینه باشد و داشتن حق انتخاب راه خوبی برای نشان دادن این موضوع به کاربران شما است که همه را در نظر می گیرید. ، حتی آنهایی که توانایی انتقال اطلاعات زیادی را ندارند.

با استفاده از جاوا اسکریپت و Web API Fetch، می‌توانید از یک سیگنال همراه با کنترلر لغو استفاده کنید تا راهی برای لغو درخواست ارائه دهید.

اعتبار سنجی

در نهایت شما درخواست ارسال کرده اید، همه چیز طبق برنامه پیش می رود و پاسخ موفقیت آمیز دریافت می کنید. یا آن؟

چگونه می توانید مطمئن باشید که سرور در یک روز، یک هفته یا یک سال پاسخ خود را تغییر نمی دهد؟ برنامه شما ممکن است برای مدتی کار کند، اما اگر کسی تصمیم بگیرد که یک شی با یک ویژگی به جای آرایه طبق معمول ارسال کند، ممکن است دچار مشکل شوید زیرا سعی می کنید به جای آرایه ای که خارج از آن امکان پذیر نیست، روی یک شی تکرار کنید. -of-the-box در جاوا اسکریپت.

اعتبار سنجی داده ها مرحله مهمی است و ممکن است در برخی موارد اجباری باشد زیرا حتی اگر بدانید که امروز چه می کنید و تنها توسعه دهنده یک برنامه frontend و backend هستید، ممکن است یک سال دیگر تنها نباشید و افراد ممکن است به مبارزه بپیوندید و به شما کمک کند.

اگر از یک تعطیلات طولانی برمی‌گردید و API تغییر کرده است، حداقل با اعتبارسنجی داده‌ها، می‌دانید که این موردی است که شما به آن اشاره کرده‌اید و برنامه‌تان ناگهان خراب نمی‌شود (و حتی ممکن است خطاهای بهتری دریافت کنید که شما را به این خطا را سریعتر از بدون تایید داده ها حل کنید).

همچنین، با اعتبارسنجی داده‌ها، می‌توانید به زبان‌هایی که به شدت تایپ شده‌اند مانند TypeScript تکیه کنید تا اطمینان حاصل کنید که پس از تجزیه و اعتبارسنجی این داده‌ها، 100% مطمئن هستید که می‌توانید به جای ترس از تغییر آن در آینده نزدیک، روی آن تکرار کنید. .

مثال

در اینجا به عنوان مثال، یک برنامه مبتدی ممکن است در React به نظر برسد.

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

export const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users").then(response => {
      return response.json();
    }).then(newUsers => {
      setUsers(newUsers);
    });
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.username}</li>
      ))}
    </ul>
  );
};

همانطور که می بینید، بدون وضعیت بارگیری، بدون درخواست قابل لغو، بدون حسابداری برای خطاها و اعتبارسنجی داده ها وجود ندارد.

این چیزی است که ممکن است با همه این موارد اضافه شده به نظر برسد.

import React, { Fragment, useEffect, useState, useCallback } from "react";

const isValidUser = input => {
  return typeof input === "object"
    && input !== null
    && typeof input.id === "number"
    && typeof input.username === "string";
}

const isValidUsers = users => {
  if (!Array.isArray(users)) {
    return false;
  }

  if (!users.every(user => isValidUser(user))) {
    return false;
  }

  return true;
}

export const App = () => {
  const [users, setUsers] = useState([]);
  const [abortController, setAbortController] = useState(new AbortController());
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const cancel = useCallback(() => {
    abortController.abort();
  }, [abortController]);

  useEffect(() => {
    const newAbortController = new AbortController();
    const { signal } = newAbortController;

    setAbortController(newAbortController);
    setError(null);
    setLoading(true);

    fetch("https://jsonplaceholder.typicode.com/users", {
      signal
    }).then(response => {
      if (response.ok) {
        return response.json();
      }

      return Promise.reject(new Error("Something went wrong"));
    }).then(newUsers => {
      if (!isValidUsers(newUsers)) {
        throw new Error("Wrong response from the server");
      }

      setUsers(newUsers);
    }).catch(error => {
      setError(error);
    }).finally(() => {
      setLoading(false);
    });
  }, []);

  return (
    <Fragment>
      {loading && (
        <small>Loading, please wait...</small>
      )}
      {error && (
        <small>{error.message}</small>
      )}
      <button onClick={cancel}>Cancel</button>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.username}</li>
        ))}
      </ul>
    </Fragment>
  );
};

البته هیچ استایلی اعمال نشده است، بنابراین افتضاح به نظر می رسد، اما حداقل شما این ایده را دریافت می کنید.

روشی برای لغو درخواست، نشانه بارگیری برای اطمینان دادن به کاربر، نمایش هرگونه خطا و مکانیزم اعتبارسنجی داده‌های اولیه اضافه کردیم تا مطمئن شویم داده‌هایی که دریافت می‌کنیم خراب نشده یا تغییر نکرده‌اند.

نتیجه

ما دیدیم که برای ساخت برنامه های قابل اعتماد، 5 مرحله وجود دارد که هر زمان درخواستی را به یک سرور ارائه می کنیم باید آنها را دنبال کنیم:

• درخواست مناسب بفرستید
• نمایش وضعیت بارگذاری
• نمایش خطا در صورت وجود
• درخواست را لغو کنید
• داده هایی را که دریافت می کنیم اعتبار سنجی کنیم

اگر بتوانید این مراحل را دنبال کنید، برنامه های کاربردی بسیار قابل اعتمادی خواهید ساخت که تست شده و محکم هستند.

این فوراً برنامه شما را در چشم کاربران شما بهتر می کند.

این مفاهیم نه به جاوا اسکریپت و نه به React گره خورده اند و می توانند تقریباً روی هر زبان یا هر چارچوب و کتابخانه ای در آنجا اعمال شوند تا زمانی که این مراحل را دنبال کنید.