javascriptFetch and HTTP JSONدریافت داده با Fetch در جاوااسکریپت
Fetch در جاوااسکریپت را با پاسخ JSON بشناسید؛ تفاوت خطای شبکه و HTTP، بررسی response.ok، اعتبار داده و لغو درخواست را در نمونهٔ مستقل ببینید.
مفهوم به زبان ساده
fetch برای دریافت یک Response از یک نشانی به کار می‌رود و نتیجهٔ آن Promise است. آماده‌شدن پاسخ با خواندن بدنه یک مرحلهٔ واحد نیست؛ response.json نیز یک کار ناهمگام برای خواندن و تجزیهٔ JSON انجام می‌دهد. برای ترتیب روشن، از async و await و برای مسیر شکست از try/catch استفاده کنید.
پاسخ HTTP مانند ۴۰۴ معمولاً Promise خود fetch را رد نمی‌کند. پس در درخواست HTTP باید response.ok یا status را بررسی کنید؛ ok وضعیت‌های ۲۰۰ تا ۲۹۹ را می‌پذیرد. خطای شبکه، ناممکن‌بودن خواندن پاسخ یا JSON خراب مسیر دیگری است. پس از تجزیه هم باید شکل داده بررسی شود؛ داشتن JSON معتبر، وجود آرایهٔ درس‌ها یا عددبودن مبلغ را تضمین نمی‌کند.
مثال از نشانی data استفاده می‌کند و هیچ سرویس بیرونی را فراخوانی نمی‌کند؛ مراحل پاسخ و بررسی داده را نشان می‌دهد. در درخواست HTTP، مبدأ و CORS اهمیت دارند. برای امکان لغو، AbortController بسازید و signal آن را به fetch بدهید؛ زمان‌سنج خودکار همیشگی برای همهٔ درخواست‌ها فرض نکنید. لغو انتظار مرورگر نیز تضمین نمی‌کند عملیات سمت سرور برگردانده شده است. برای تمرین، lessons را از آرایه به متن تغییر دهید و مسیر شکست قرارداد را ببینید.
کجا به کار می‌آید؟
- دریافت فهرست داده برای به‌روزرسانی یک بخش صفحه
- جداکردن شکست انتقال، وضعیت HTTP و ناسازگاری مدل داده
از تعریف تا یک مثال واقعی
async function readLessons() {
const text = JSON.stringify({ lessons: ['مبانی', 'تمرین'] });
const url = 'data:application/json,' + encodeURIComponent(text);
const response = await fetch(url);
if (!response.ok) throw new Error('Response failed');
const data = await response.json();
if (!Array.isArray(data.lessons) || !data.lessons.every(x => typeof x === 'string')) {
throw new TypeError('Invalid lesson list');
}
console.log(data.lessons.join('، '));
}
readLessons().catch(() => console.log('دریافت یا بررسی داده ناموفق بود'));
مبانی، تمرین
این مثال چطور کار می‌کند؟
یک متن JSON محلی در نشانی data قرار می‌گیرد؛ درخواست خارجی نداریم.
پس از بررسی پاسخ، بدنه با json خوانده می‌شود.
قرارداد آرایهٔ رشته‌ها کنترل می‌شود و سپس عنوان‌ها چاپ می‌شوند.
اشتباه رایج
موفق‌بودن fetch به‌تنهایی به معنی HTTP موفق یا دادهٔ معتبر نیست. خواندن response.json نیز می‌تواند خطا بدهد؛ هر سه مرز را بررسی کنید.
این را به خاطر بسپارید
پاسخ، بدنه و قرارداد داده سه مرحله‌اند؛ مسیر موفق و شکست هر مرحله را صریح نگه دارید.