زمانی که در پروژه React خود درخواست GET کردم که قرار بود فایلی را که می‌توانم دانلود کنم بازگرداند، با مشکلی مواجه شدم. برای اینکه فایل به درستی دانلود شود، مجبور شدم تایپ پاسخ را یک حباب کنم.

اما اگر زمانی که سرور یک شی JSON را برمی گرداند خطایی رخ می داد، من نمی توانم آن شی را دریافت کنم زیرا قبلاً نوع پاسخ را به عنوان یک حباب تعریف کرده بودم. و اگر تعریف blob را حذف کنم، فایل فقط به صورت JSON معمولی برمی گردد و ممکن است به درستی دانلود نشود.

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

این راهنما به شما نشان می دهد که چگونه یک شی JSON را برای اهداف رسیدگی به خطا حفظ کنید، در حالی که می توانید یک فایل را از یک سرور دانلود کنید. ما از Axios ، یک کتابخانه جاوا اسکریپت که برای درخواست های HTTP استفاده می شود، برای برقراری تماس API خود استفاده خواهیم کرد.

مرحله 1: نوع پاسخ را در تماس API تعریف کنید

ابتدا تابعی را تعریف کنید که درخواست HTTP را به سرور ارسال کند. در این مورد، ما منتظر یک فایل هستیم، پس فعل HTTP معمولی GET خواهد بود.

نوع پاسخ برای درخواست‌های Axios به طور پیش‌فرض JSON است، اما ما می‌خواهیم آن را به شکل زیر تغییر دهیم:

 import axios from "axios"; const getFileFromServer = () => { const res = await axios.get('https://api.some-server.com', {responseType: 'blob'})?.data; return res; }

مرحله 2: تبدیل Blob به متن

در مرحله قبل توانستیم فایل خود را به صورت حباب به راحتی دریافت کنیم. اما وقتی نوبت به نمایش خطا می رسد، باید آن را به صورت JSON نشان دهیم.

ابتدا، باید درخواست را در یک دستور try/catch بپیچیم تا مشخص کنیم اگر در حین انجام درخواست خطایی رخ دهد، چه اتفاقی باید بیفتد.

 import axios from "axios"; const getFileFromServer = async () => { try { const res = await axios.get('https://api.some-server.com', {responseType: 'blob'}).data; return res; } catch (error) { let errorResponse = await error.response.data.text(); const errorObj = JSON.parse(response); console.log(errorObj) // log error to console } }

تبدیل نوع در داخل بلوک catch انجام شد. ابتدا، ما داده‌های پاسخ را با استفاده از متد text() از Fetch API جاوا اسکریپت به یک رشته JSON تبدیل کردیم.

در نهایت از متد JSON.parse() برای تبدیل آن رشته به JSON واقعی استفاده کردیم. به این ترتیب، می‌توانیم به شی در قالب مورد نظر خود دسترسی داشته باشیم و در صورت عدم وجود خطا، بتوانیم فایل را از سرور بازیابی کنیم.

ثبت شی خطا در کنسول چیزی شبیه به این خواهد شد:

 { "statusCode": 400, "message": "Some error occured" }

نتیجه

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

نظرات خود را در مورد مقاله به من بگویید و هر گونه پیشنهادی را که فکر می کنید می تواند راه حل من را بهبود بخشد، در اختیارم بگذارید.

با تشکر برای خواندن!

خبرکاو