دریافت داده‌ها از Firebase

Getting Data from Firebase

در جلسه قبل با نحوه ارسال داده ها در قالب درخواست POST آشنا شدیم و همانطور که مشاهده کردید، پاسخ firebase را نیز در کنسول مرورگر چاپ کردیم. هدف ما در این جلسه آشنایی با دستورات GET است تا بتوانیم داده ها را به جای ارسال به Firebase از آن دریافت کنیم. همچنین نگاهی به پاسخ firebase در هنگام ثبت داده خواهیم داشت تا بتوانیم داده های ثبت شده را از آن بگیریم.

برای شروع به فایل App.vue می رویم و قسمت های جدیدی را برای این کار اضافه می کنیم. برای شروع یک آرایه به نام users را تعریف می کنیم تا داده های دریافتی از Firebase را در آن قرار دهیم:

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

سپس دکمه ای را برای دریافت داده ها تعریف می کنیم. کار این دکمه دریافت داده ها از پایگاه داده (firebase) و سپس ذخیره آن در آرایه users است. در نهایت ما با یک v-for ساده درون این آرایه گردش می کنیم تا داده های درون users را نمایش بدهیم:

<div class="form-group">
  <label>Mail</label>
  <input class="form-control" type="text" v-model="user.email" />
</div>
<button class="btn btn-primary" @click="submit">Submit</button>
<hr />
<button class="btn btn-primary" @click="fetchData">Get Data</button>
<br />
<br />
 <ul class="list-group">
  <li class="list-group-item" v-for="u in users">{{ u.username }} - {{ u.email }}</li>
  </ul>

همانطور که می بینید نام این دکمه Get Data است و متدی به نام fetchData را اجرا می کند. سپس یک <ul> داریم که درون خود <li> های مختلفی خواهد داشت چرا که از یک حلقه v-for برای گردش بین داده های درون آرایه users استفاده کرده ام. در مرحله بعد باید متد fetchData را تعریف کنیم بنابراین:

fetchData() {
  this.$http.get("https://vuejs-http-roxoir.firebaseio.com/data.json")
    .then(response => {
      
    });
}

همانطور که می بینید این متد دقیقا همان URL قبلی را می گیرد چرا که می خواهیم اطلاعات را از همان پایگاه داده و همان node دریافت کنیم. سپس مثل همیشه پاسخ خود را از طریق Then دریافت خواهیم کرد. خوشبختانه پکیج vue-resource چند متد کمکی را برای ما آماده کرده است تا بتوانیم راحت تر با داده های برگردانده شده کار کنیم. یکی از این متدها json است که body (بدنه) هر درخواستی را از آن جدا کرده و تبدیل به یک شیء جاوا اسکریپتی می کند تا بتوانیم راحت تر از آن استفاده کنیم. همانطور که می دانید در حالت عادی بدنه درخواست ما رشته ای است و کار با رشته ها آزار دهنده است. اگر هم خودمان می خواستیم آن را تبدیل به یک شیء جاوا اسکریپتی کنیم باید کدهایش را خودمان می نوشتیم که زمان گیر بود.

برای امتحان کردن این متد می توان گفت:

fetchData() {
  this.$http
    .get("https://vuejs-http-roxoir.firebaseio.com/data.json")
    .then(response => {
      const data = response.json();
      console.log(data);
    });
}

یعنی پس از دریافت داده ها آن را درون متغیری به نام data ذخیره کرده و سپس در کنسول مرورگر چاپ می کنیم. اگر کدهای بالا را ذخیره کرده و به مرورگر بروید، با کلیک روی دکمه get data به جای دریافت داده ها یک promise دریافت می کنید که داده ها را در خود ندارد. دلیلش این است که response.json خودش یک promise دیگر را به ما می دهد و اینطور نیست که داده ها را مستقیما برگرداند. بنابراین روش درست برای نوشتن کد بالا بدین شکل است:

fetchData() {
  this.$http
    .get("https://vuejs-http-roxoir.firebaseio.com/data.json")
    .then(response => {
      return response.json();
    })
    .then(data => console.log(data));
}

حالا اگر کدها را ذخیره کرده و در مرورگر دکمه get data را بزنید، در قسمت کنسول اطلاعات خودمان را در قالب یک شیء دریافت کرده ایم:

دریافت داده ها از firebase در کنسول مرورگر

ساختار برگردانده شده به ما یک شیء است که درون خود چندین شیء مختلف دارد. هر کدام از این اشیاء معادل یکی از درخواست های POST ما می باشد. بنابراین همه چیز به درستی کار می کند و به جای آنکه داده ها را log کنم باید آن ها را درون آرایه users قرار دهیم تا به صورت یک لیست نمایش داده شوند. داده های ما به صورت یک شیء برگردانده شده اند و من برای اینکه بتوانم آن ها را وارد آرایه کنم، تصمیم گرفته ام این داده ها را تبدیل به یک آرایه کنم:

 fetchData() {
  this.$http
    .get("https://vuejs-http-roxoir.firebaseio.com/data.json")
    .then(response => {
      return response.json();
    })
    .then(data => {
      const resultArray = [];
      for (let key in data) {
        resultArray.push(data[key]);
      }
      this.users = resultArray;
    });
}

یعنی در ابتدا یک آرایه خالی به نام resultArray را تعریف کرده ام، سپس در شیء data (همان اطلاعات برگردانده شده) گردش کرده ام و تک تک اشیاء درون آن را درون resultArray قرار داده ام. این کار با استفاده از متد push به راحتی انجام می شود. توجه داشته باشید که key in data یعنی هر کدام از اشیاء فرزند درون data یا به عبارتی هر کدام از آن رشته های عجیب و غریبی که در جلسه قبل به عنوان آیدی خاص تولید شده توسط firebase معرفی شدند. از آنجایی که پاسخ برگردانده شده از response.json یک شیء تو در تو است، هر key می شود یکی از داده های ما. در نهایت آرایه خودمان را برابر با users گذاشته ام. حالا اگر به مرورگر رفته و کدها را تست کنیم، نتیجه زیر را می بینیم:

نتیجه ی دریافت اطلاعات از firebase و نمایش آن ها در مرورگر — نتیجه دریافت اطلاعات از firebase و نمایش آن ها در مرورگر

Vue.js آنقدر هوشمند است که متوجه می شود ما مقدار جدیدی را برای users تعیین کرده ایم بنابراین این قسمت را دوباره بارگذاری و به روز رسانی می کند و لیست خود را مشاهده می کنیم.