آشنایی با مفهوم Resource در Vue-Resource

?What is Resource in Vue-Resource

23 آبان 1399
Vue.JS 2: آشنایی با مفهوم resource در vue-resource - قسمت 74

نکات تکمیلی interceptor ها

قبل از اینکه به مبحث اصلی خود برسیم باید چند نکته از جلسه قبل را تکمیل کنم. interceptor ها تنها برای درخواست های ارسال نیستند بلکه می توانیم برای درخواست های دریافت داده نیز از آن ها استفاده کنیم. یعنی قبل از اینکه پاسخ را در برنامه خود پردازش کنیم، آن را به نحوی تغییر بدهیم. من از همان interceptor جلسه قبل استفاده می کنم تا این موضوع را به شما نشان دهم. من در جلسه قبل توضیح دادم که دکمه Get data دیگر کار نمی کند چرا که برای درخواست های PUT خود اطلاعات را مستقیما ذخیره می کنیم بنابراین خود اطلاعات را مستقیما دریافت می کنیم و دیگر شیء ای وجود ندارد که اطلاعات را از آن بیرون بکشیم. برای حل این مشکل می توانیم متد json را override کنیم و تعریف خودمان از این متد را ارائه دهیم. همچنین برای intercept کردن پاسخ ها، آن ها را درون next دریافت می کنیم:

Vue.http.interceptors.push((request, next) => {
  console.log(request);
  if (request.method == 'POST') {
    request.method = 'PUT';
  }
  next(response => {
    response.json = () => { return { messages: response.body } }
  });
});

response همان پاسخ ارسالی به ما است که به صورت خودکار و توسط Vue پاس داده می شود. با کد بالا متد json از این به بعد یک شیء را برمی گرداند که یک key به نام messages دارد. دلیل این کار این است که در App.vue بین key ها گردش می کنیم اما دستورات PUT داده را مستقیما برمی گردانند و دیگر key نداریم که بخواهیم در آن گردش کنیم. دستور بالا بدنه پاسخ را درون messages قرار می دهد و حالا اگر به مرورگر برویم و روی get data کلیک کنیم، همه چیز به درستی کار می کند.

هشدار: override کردن متد json، این متد را به طور سراسری تغییر می دهد بنابراین هر جایی که از این متد استفاده کرده باشید، به شکل بالا تغییر خواهد کرد. در برنامه های واقعی معمولا هیچ وقت چنین کاری را انجام نمی دهیم و این مورد فقط یک مثال جهت یادگیری بهتر بود.

معنی resource در پکیج vue-resource چیست؟

آیا تا به حال از خودتان پرسیده اید که چرا پکیج vue-resource نام دیگری مانند vue-http یا امثال آن را ندارد؟ به دلیل اینکه قابلیتی کاربردی دارد که در آن می توانیم resource های (به معنی «منابع») خودمان را تعریف کنیم. این resource ها به ما اجازه می دهند، کار های رایج را به درخواست های HTTP مپ (map) کنیم. به طور مثال فرض کنید که می خواهیم چیزی را در پایگاه داده ذخیره کنیم. در حالت عادی معمولا یک متد خواهیم داشت (مثلا اسمش را saveData می گذاریم) که یک درخواست POST را به پایگاه داده ارسال می کند. resource ها دقیقا همین کار را انجام می دهند تا نیازی به کدنویسی و تعریف متد برای هر بار ذخیره داده ها نباشد.

برای استفاده از این resource ها باید ابتدا آن ها را تعریف کنیم. برای شروع من خصوصیتی به نام resource را در data ایجاد می کنم (فایل App.vue):

data() {
  return {
    user: {
      username: "",
      email: ""
    },
    users: [],
    resource: {}
  };
}

همانطور که می بینید این خصوصیت یک شیء خالی است. در مرحله بعد از lifecycle ای به نام created استفاده می کنیم تا زمانی که این کامپوننت بارگذاری شد (این کامپوننت، کامپوننت اصلی ما است بنابراین هر زمان برنامه در مرورگر باز شد) resource های ما اجرا شوند:

  created() {
    this.resource = this.$resource();
  }

this.resource اشاره به خصوصیت ما دارد که الان تعریفش کردیم و this.$resource به متد خاصی به نام resource اشاره می کند که از پکیج vue-resource می آید. ما باید به این متد آرگومان های خاصی را پاس بدهیم که تک تک آن ها را بررسی می کنیم. اولین آرگومان ما resource یا منبع اطلاعات ما است. من به فایل main.js می روم و root url را تغییر می دهم تا آرگومان اول را به صورت شیء خالی قرار ندهیم (می خواهم آن را ببینید تا در ذهنتان بماند. دلیل دیگری نیز دارم که در ادامه متوجه آن خواهید شد):

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

سپس به app.vue برگشته و می گوییم:

created() {
  this.resource = this.$resource("data.json");
}

فعلا این resource را به همین شکل تغییر می دهم (در ادامه بیشتر در مورد آن صحبت خواهیم کرد). با این حساب باید URL های متد های fetchData و submit را نیز تغییر بدهیم:

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

سپس برای اینکه از resource تعریف شده استفاده کنیم، به متد submit رفته و دستور post قبلی را کامنت می کنیم. پکیج vue-resource از متد ها یا بهتر است بگوییم رفتار های پیش فرضی دارد که می توانیم آن ها را در documentation رسمی پیدا کنیم:

get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}

می بینید که save از نوع POST است بنابراین می توانیم از آن استفاده کرده و بگوییم:

methods: {
  submit() {
    // this.$http.post("data.json", this.user).then(
    //   response => {
    //     console.log(response);
    //   },
    //   error => {
    //     console.log(error);
    //   }
    // );
    this.resource.save();
  },
// بقیه کدها //

همانطور که می بینید تمام کدهای متد submit را کامنت کرده و به جای آن از this.resource.save استفاده کرده ام اما سوال بعدی ما این است که save چه آرگومان هایی می گیرد؟ اولین آرگومان آن هر پارامتری است که بخواهیم به URL پیوست کنیم و دومین آرگومان داده هایی است که می خواهیم به همراه درخواست ارسال شوند. من فعلا با آرگومان اول کاری ندارم و در جلسات بعد آن را بررسی می کنیم اما آرگومان دوم همان داده هایی است که در خصوصیت user در Data ذخیره می شوند (اطلاعات تایپ شده توسط کاربر) بنابراین:

submit() {
  // this.$http.post("data.json", this.user).then(
  //   response => {
  //     console.log(response);
  //   },
  //   error => {
  //     console.log(error);
  //   }
  // );
  this.resource.save({}, this.user);
},

توجه داشته باشید که اگر نمی خواهید پارامتری را به URL پیوست کنید، حتما باید یک شیء خالی را پاس بدهید. حالا اگر به مرورگر رفته و فرم را باری دیگر پر کنید، داده ها با موفقیت به firebase می روند. البته توجه داشته باشید که هنوز interceptor ما فعال است بنابراین درخواست های POST به PUT تبدیل می شوند و داده های جدید، داده های قبلی را پاک می کنند. امیدوارم این مثال شما را با مباحث ابتدایی resource ها آشنا کرده باشد. در قسمت بعدی، به صورت پیشرفته تری راجع به Resource ها صحبت خواهیم کرد.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان Vue js از صفر تا صد توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.