آشنایی با Interceptorها در Vue-Resource

Familiarity with Interceptors in Vue-Resource

در قسمت قبل با نحوه ارسال درخواست های get آشنا شدیم و توانستیم داده های خود را از firebase گرفته و نمایش بدهیم اما باید با پکیج vue-resource بیشتر آشنا شویم. مثلا در حال حاضر ما مکررا URL پایگاه داده خود را تکرار می کنیم:

  methods: {
    submit() {
      this.$http
        .post("https://vuejs-http-roxoir.firebaseio.com/data.json", this.user)
        .then(
// بقیه کد ها //
    fetchData() {
      this.$http
        .get("https://vuejs-http-roxoir.firebaseio.com/data.json")
        .then(

همانطور که می بینید URL در هر دو درخواست نوشته شده است در حالی که تکراری است. vue-resource به ما اجازه می دهد که برخی از اطلاعات مشترک را به صورت سراسری ذخیره کنیم تا از نوشتن کد های تکراری جلوگیری کنیم. برای این کار به فایل main.js رفته و می گوییم:

Vue.use(VueResource);

Vue.http.options.root = 'https://vuejs-http-roxoir.firebaseio.com/data.json';

توجه داشته باشید که برای http در اینجا از $ استفاده نکرده ایم، بلکه تنها زمانی از $ استفاده می کنیم که بخواهیم http را درون یک شیء Vue بیاوریم. در دستور بالا مشخص است که یک root url یا URL اصلی را ثبت کرده ایم. با این کار از این به بعد تمام درخواست های HTTP ما به این آدرس ارسال خواهد شد. بنابراین می توانیم متد های درون App.vue را بدین شکل ویرایش کنیم:

  methods: {
    submit() {
      this.$http.post("", this.user).then(
// بقیه کد ها //
    fetchData() {
      this.$http
        .get("").then(
// بقیه کد ها //

یعنی به جای URL می توانیم یک رشته خالی پاس بدهیم و از این به بعد درخواست ها به همان URL اصلی در main.js ارسال خواهد شد. یادتان باشد که اگر درون رشته چیزی بگذارید، به URL اصلی پیوست می شود. مثلا این درخواست را در نظر بگیرید:

    fetchData() {
      this.$http
        .get("/someOtherPage")
        .then(response => {
// بقیه کد ها //

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

https://vuejs-http-roxoir.firebaseio.com/data.json/someOtherPage

البته شیء سراسری options امکانات دیگری را نیز به ما می دهد. به طور مثال می توانید header های درخواست هایتان را به صورت پیش فرض تعیین کنید (Vue.http.options.headers) که با مراجعه به documentation رسمی قابل یادگیری است.

آشنایی با interceptor ها

یکی دیگر از قابلیت های vue-resource وجود interceptor ها (به معنی «قطع کننده») است. ما می توانیم با استفاده از interceptor ها، دستورات HTTP را قبل از ارسال کامل قطع کرده، تنظیماتی را روی آن ها پیاده کرده و سپس ارسال کنیم. بهترین روش آشنایی با آن ها استفاده عملی از آن ها است بنابراین وارد فایل main.js می شویم. ما می توانیم روی شیء سراسری http به interceptor ها دسترسی داشته باشیم که در نهایت آرایه ای از توابع هستند که روی تمام درخواست های HTTP ما اجرا می شوند:

Vue.http.interceptors.push((request, next) => {});

از آنجایی که interceptor ها نهایتا آرایه ای از توابع هستند می توانیم با استفاده از push یک تابع دیگر را به این آرایه اضافه کنیم. request همان درخواست ما است و next یک تابع است که به ما اجازه می دهد پس از اعمال تغییرات، به درخواست اجازه ارسال بدهیم. یک بار دیگر توضیح می دهم که interceptor ها، درخواست های HTTP ما را قطع می کنند (درخواست های در حال ارسال را می گیرند) و تغییرات مورد نظر شما (چیز های که در تابع مشخص کنید) را روی آن ها اعمال می کنند. اگر next را صدا نزنیم، درخواست آزاد نمی شود بنابراین هیچ وقت ارسال نخواهد شد. شما می توانید در تابع بالا هر کدی را که خواستید بنویسید. من مثال زیر را انتخاب کرده ام:

Vue.http.options.root = 'https://vuejs-http-roxoir.firebaseio.com/data.json';

Vue.http.interceptors.push((request, next) => {
  console.log(request);
  if (request.method == 'POST') {
    request.method = 'PUT';
  }
  next();
});

ابتدا درخواست را log کرده ام تا آن را مشاهده کنیم. سپس گفته ام اگر متد درخواست ما از نوع POST بود آن را روی PUT بگذار، بنابراین درخواست های GET تحت تاثیر قرار نمی گیرند. در نهایت next را صدا می زنیم تا درخواست بتواند ادامه دهد و به سرور برسد. حالا به مرورگر می رویم و فرم را پر می کنیم تا یک کاربر جدید ثبت کنیم. پس از ارسال درخواست می توانید به کنسول نگاه کنید:

تغییر درخواست های post به PUT توسط interceptor ها

همانطور که می بینید، این درخواست در خط اول گفته است:

method: POST

اما چند خط پایین تر گفته است:

method: PUT

البته توجه داشته باشید که درخواست های ما object (شیء) هستند و اشیاء نیز reference typed هستند بنابراین ممکن است شما فقط method: PUT را مشاهده کنید و دیگر این سیر تغییرات را نبینید. قسمت دوم در تصویر بالا پاسخ firebase پس از ثبت اطلاعات است. اگر به داشبورد خود در firebase بروید با چنین چیزی مواجه می شوید:

دستور PUT تمام داده های قبلی را پاک کرده و جایگزین آن ها می شود

یعنی دیگر id های عجیب و غریب نداریم بلکه داده ها مستقیما وارد پایگاه داده شده است! اگر الان به مرورگر بروید و یک درخواست دیگر را ثبت کنید، اطلاعات قبلی حذف شده و اطلاعات جدید به جای آن جایگزین می شوند و دقیقا به همین شکل (بدون آیدی و مستقیم) درون firebase قرار می گیرند. این تفاوت بین درخواست های PUT و POST در firebase است. درخواست های POST منابع جدید (resource) می سازند و داده های ما را به منابع قبلی پیوست می کنند بنابراین نیاز دارند تا یک id خاص بسازند تا داده های قبلی را replace (جایگزین) نکنند اما PUT همیشه داده های قبلی را به طور کامل حذف می کند. البته تفاوت میان PUT و POST در پایگاه های داده مختلف و سرور های مختلف متفاوت است و بستگی دارد شرکت مورد نظر چه فرقی بین این دو قائل شده باشد.

نکته مهم برای ما این است که توانسته ایم با استفاده از interceptor ها جلوی ارسال یک درخواست را بگیریم، آن را از POST به PUT تغییر دهیم و سپس رهایش کنیم تا به سرور برسد. البته دیگر get data کار نمی کند چرا که پاسخ برگشتی از firebase برای دستورات PUT با دستورات POST تفاوت دارد بنابراین ساختار ما بهم ریخته است. به هر حال امیدوارم معنای interceptor ها را درک کرده باشید.