از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
ارسال درخواستهای POST JSON با AxiosAxios یک کتابخانه مشتری HTTP مبتنی بر وعده است که ارسال درخواستهای HTTP ناهمزمان (مانند POST، GET و DELETE) را به نقاط پایانی REST، عمدتاً APIها، ساده میکند. در این مقاله، روش ارسال درخواست های POST JSON با Axios و روش مدیریت هر دو سریال قبلی و غیر سریالی را یاد می گیریم.
سرفصلهای مطلب
معرفی
Axios یک کتابخانه سرویس گیرنده HTTP مبتنی بر وعده است که ارسال درخواست های HTTP ناهمزمان (مانند POST
، GET
، و DELETE
) برای استراحت در نقاط پایانی ، عمدتا API.
در این مقاله، روش ارسال درخواستهای POST JSON با Axios و روش مدیریت دادههای سریالسازیشده قبلی و غیرسریالیشده را یاد میگیریم.
روش ارسال درخواست های JSON با استفاده از Axios
درخواست پست استفاده می شود ارسال داده به یک نقطه پایانی به عنوان مثال ، اگر ثبت نام داشته باشیم page در جایی که کاربران اطلاعات خود را ارسال می کنند، این اطلاعات را می توان به صورت JSON به نقطه پایانی که با استفاده از درخواست POST JSON مشخص می کنیم ارسال کرد.
ما استفاده می کنیم axios.post()
روش ارسال درخواست POST با Axios، که دو پارامتر اصلی را می گیرد – URL نقطه پایانی (url
، و شی نشان دهنده داده هایی است که می خواهیم پست کنیم (data
):
axios.post(url(, data(, config)))
علاوه بر این دو پارامتر، یک پارامتر سوم نیز وجود دارد – config
. برای پیکربندی درخواست POST که ما ارسال می کنیم، عمدتاً برای تنظیم هدرها استفاده می شود.
ارسال داده های غیرقانونی
توجه به این نکته ضروری است که Axios به طور پیش فرض از JSON برای ارسال داده ها استفاده می کند، به این معنی که هر شی که به Axios ارسال می کنیم، به طور خودکار شی را به JSON سریال می کند و مقدار را تنظیم می کند. Content-Type
سربرگ به application/json
. بیایید آن را در مثال نشان دهیم – فرض کنید ما در حال ارسال شی هستیم { name: 'John Doe' }
:
const result = await axios.post('https://testapi.org/post', { name: 'John Doe' });
Axios به طور خودکار شی را به فرمت JSON سریال می کند:
console.log(result.data.data); // '{"name":"John Doe"}'
و همانطور که گفتیم، ما را نیز تنظیم خواهد کرد Content-Type
سربرگ به application/json
:
console.log(result.data.headers('Content-Type')); // 'application/json;charset=utf-8'
ارسال رشته JSON Serialized
تاکنون دیدهایم که Axios هر دادهای را که ارسال میکنیم بهطور خودکار سریالسازی میکند، اما در این مورد، یک رشته JSON سریالسازی شده را بهعنوان پارامتر دوم ارسال میکنیم. axios.post()
روش:
const usersName = JSON.stringify({ name: 'John Doe' });
Axios به جای تنظیم هدر نوع محتوا به سادگی با این داده ها به عنوان یک بدنه درخواست کدگذاری شده با فرم رفتار می کند. application/json
، همانطور که در زیر نشان داده شده است:
const usersName = JSON.stringify({ name: 'John Doe' });
const result = await axios.post('https://testapi.org/post', usersName);
console.log(result.data.headers('Content-Type')); // 'application/x-www-form-urlencoded',
برای حل این مشکل، ما باید به صراحت تنظیم کنیم Content-Type
سربرگ به application/json
. ما می توانیم آن را با عبور از config
استدلال هنگام فراخوانی axios.post()
روش:
const usersName = JSON.stringify({ name: 'John Doe' });
customConfig = {
headers: {
'Content-Type': 'application/json'
}
};
const result = await axios.post('https://testapi.org/post', usersName, customConfig);
console.log(result.data.data); // '{"name":"John Doe"}'
console.log(result.data.headers('Content-Type')); // 'application/json',
نتیجه
در این مقاله، روش ارسال درخواستهای POST JSON با Axios را یاد گرفتیم، کاملاً آگاه بودیم که این دادهها میتوانند سریالی یا غیر سریالی باشند، و با هر دو سناریو برخورد کردیم.
منتشر شده در 1403-01-08 08:01:05