Web Devs

✳️Network Requests via Fetch() API

🔸 متد fetch در جاوااسکریپت رابطی است که می توانید از طریق آن بر بستر شبکه درخواست ارسال کنید.
🔸 برای ارسال درخواست به سرور و دریافت اطلاعات چند راه وجود دارد که متد fetch یک راه مدرن و جدید و جامع میباشد.
🔹 مرورگرهای قدیمی و بخصوص مرورگر محبوب دولوپران (IE) 😉 از این متد پشتیبانی نمیکنند.
🔹در نتیجه در زمان استفاده از این متد باید مطمئن باشید که client از یک مرورگر جدید استفاده میکند.
🔹این متد با استفاده از promise ها در جاوااسکریپت پیچدگی ارسال درخواست را کاهش میدهد و بدین ترتیب کدی خوانا تر خواهید نوشت.

❇️ نحوه درخواست با متد fetch بدین شکل است :

let promise = fetch(URL, [options])

🔹 تنها پارامتر اجباری برای ارسال درخواست url میباشد و [options] پارامتر هایی نظیر method,header و.. میباشد که میخواهید به همراه در خواست قرار دهید.
مرورگر بلافاصله با مواجه شده با این متد شروع به ارسال درخواست میکند و در نهایت یک promise باز میگرداند و response را بعد از resolve شدن promise بازگردانده شده در دسترس خواهد بود.
در صورتی که به دلایلی متد fetch نتواند به سرور در خواست ارسال کند promise بازگردانده شده reject خواهد شد.❗️

🔸با resolve شدن promise و دریافت response برای خواندن داده های دریافتی دو مرحله وجود دارد :
▫️ابتدا باید http Status code را چک کنید و مطمئن شوید که درخواست با موفقیت ارسال شده است یا خیر.
▫️مرحله بعدی خواندن body از response میباشد که بدین منظور response متدهای promise base ای را در اختیار شما قرار میدهد.
متد های به شرح زیر است :
🔻response.text()
برای خواندن response به صورت text

🔻response.json()
برای خواندن response به صورت json

🔻response.formData()
برای خواندی response به صورت formData

🔻response.blob()
برای خواندن response به صورت Blob
(داده های باینری به همراه تایپ)

🔻response.arrayBuffer()
خواندن response به صورت ArrayBuffer
(نمایش سطح پایینی از داده های باینری)

🔻 علاوه بر اینها response.body یک شی ای ReadableStream خواهد بود که به شما اجازه خواندن body را میدهد.

⚠️ برای خواندن بادی response فقط از یکی از این متد ها میتوانید استفاده کنید.
اگر بادی response را با استفاده از یکی از این متد ها خوانده باشید دیگر قادر نخواهید بود تا دوباره بادی response را بخوانید.

let text = await response.text(); // response body consumed

let parsed = await response.json(); // fails (already consumed)

✳️ Differences from jQuery Ajax

🔹 گفتیم که خروجی متد fetch یک promise میباشد، promise بازگشتی حتی در صورتی که Http status code عدد 404 یا 500 باشد reject نخواهد شد
و فقط Okstatus برای response بازگشتی false خواهد بود.

🔹 متد fetch در درخواست ها cookie را ارسال نمیکند مگر اینکه به همراه درخواست ارسالی credentials را برابر با 'same-origin' قرار دهید.
fetch(
'http://domain/service',
{
method: 'GET',
credentials: 'same-origin'
}
)

🔹 در هنگام استفاده از متد fetch کوکی های ارسالی از دامین های متفاوت (cross-site cookie) دریافت نخواهد شد.

❇️ Fetch vs Ajax

🔸 اگر کلاینتی دارید که ممکن است از IE استفاده کند fetch انتحاب خوبی نخواهد بود و همچین متد fetch تمامی امکانات Ajax را دارا نیست اما بدون شک آینده از آن Fetch خواهد بود پس فعلا در استفاده از آن احتیاط کنید.

@FullStackDevs

www.tgoop.com/fullStackDevs/524

1.21K viewsedited  Jun 5, 2020 at 04:39

✳️Network Requests via Fetch() API

🔸 متد fetch در جاوااسکریپت رابطی است که می توانید از طریق آن بر بستر شبکه درخواست ارسال کنید.
🔸 برای ارسال درخواست به سرور و دریافت اطلاعات چند راه وجود دارد که متد fetch یک راه مدرن و جدید و جامع میباشد.
🔹 مرورگرهای قدیمی و بخصوص مرورگر محبوب دولوپران (IE) 😉 از این متد پشتیبانی نمیکنند.
🔹در نتیجه در زمان استفاده از این متد باید مطمئن باشید که client از یک مرورگر جدید استفاده میکند.
🔹این متد با استفاده از promise ها در جاوااسکریپت پیچدگی ارسال درخواست را کاهش میدهد و بدین ترتیب کدی خوانا تر خواهید نوشت.

❇️ نحوه درخواست با متد fetch بدین شکل است :

let promise = fetch(URL, [options])

🔹 تنها پارامتر اجباری برای ارسال درخواست url میباشد و [options] پارامتر هایی نظیر method,header و.. میباشد که میخواهید به همراه در خواست قرار دهید.
مرورگر بلافاصله با مواجه شده با این متد شروع به ارسال درخواست میکند و در نهایت یک promise باز میگرداند و response را بعد از resolve شدن promise بازگردانده شده در دسترس خواهد بود.
در صورتی که به دلایلی متد fetch نتواند به سرور در خواست ارسال کند promise بازگردانده شده reject خواهد شد.❗️

🔸با resolve شدن promise و دریافت response برای خواندن داده های دریافتی دو مرحله وجود دارد :
▫️ابتدا باید http Status code را چک کنید و مطمئن شوید که درخواست با موفقیت ارسال شده است یا خیر.
▫️مرحله بعدی خواندن body از response میباشد که بدین منظور response متدهای promise base ای را در اختیار شما قرار میدهد.
متد های به شرح زیر است :
🔻response.text()
برای خواندن response به صورت text

🔻response.json()
برای خواندن response به صورت json

🔻response.formData()
برای خواندی response به صورت formData

🔻response.blob()
برای خواندن response به صورت Blob
(داده های باینری به همراه تایپ)

🔻response.arrayBuffer()
خواندن response به صورت ArrayBuffer
(نمایش سطح پایینی از داده های باینری)

🔻 علاوه بر اینها response.body یک شی ای ReadableStream خواهد بود که به شما اجازه خواندن body را میدهد.

⚠️ برای خواندن بادی response فقط از یکی از این متد ها میتوانید استفاده کنید.
اگر بادی response را با استفاده از یکی از این متد ها خوانده باشید دیگر قادر نخواهید بود تا دوباره بادی response را بخوانید.

let text = await response.text(); // response body consumed

let parsed = await response.json(); // fails (already consumed)

✳️ Differences from jQuery Ajax

🔹 گفتیم که خروجی متد fetch یک promise میباشد، promise بازگشتی حتی در صورتی که Http status code عدد 404 یا 500 باشد reject نخواهد شد
و فقط Okstatus برای response بازگشتی false خواهد بود.

🔹 متد fetch در درخواست ها cookie را ارسال نمیکند مگر اینکه به همراه درخواست ارسالی credentials را برابر با 'same-origin' قرار دهید.
fetch(
'http://domain/service',
{
method: 'GET',
credentials: 'same-origin'
}
)

🔹 در هنگام استفاده از متد fetch کوکی های ارسالی از دامین های متفاوت (cross-site cookie) دریافت نخواهد شد.

❇️ Fetch vs Ajax

🔸 اگر کلاینتی دارید که ممکن است از IE استفاده کند fetch انتحاب خوبی نخواهد بود و همچین متد fetch تمامی امکانات Ajax را دارا نیست اما بدون شک آینده از آن Fetch خواهد بود پس فعلا در استفاده از آن احتیاط کنید.

@FullStackDevs

BY Web Devs