آموزش استفاده از Axios در Vue.js

گرفتن دیتا از API و نمایش آن‌ها یکی از رایج‌ترین مواردی است که هر برنامه‌نویسی با آن روزانه سرو کار دارد و برای انجام این کار روش‌های زیادی هم وجود دارد که یکی از محبوب‌ترین و پر‌استفاده‌ترین آن‌ها، Axios است.

در این مقاله سعی می‌کنم تا Axios را با استفاده از یک تمرین آموزش دهم. قرار است از API وب‌سایت Coindesk برای نمایش قیمت بیت‌کوین که هر ۱ دقیقه یکبار آپدیت می‌شود، استفاده کنیم.

نصب کتابخانه Axios

ابتدا Axios را از طریق یکی از پکیج منیجر‌های دلخواه‌تان (npm یا yarn) نصب کنید.

دستور نصب از yarn:

yarn add axios

دستور نصب از npm:

npm i vue-axios

گرفتن دیتا از API

روش‌های مختلفی برای ارسال درخواست به API وجود دارد، اما بهتر است که قبل از انجام هرکاری از فرمت یا شکل داده‌هامون مطلع بشیم تا متوجه بشیم که قرار است دقیقا چه چیزهایی را به کاربر نمایش دهیم. برای انجام این کار، یک درخواست به API ارسال می‌کنیم و تمام خروجی آن‌را به‌شکل ساده‌ای در وب‌سایتمون نمایش می‌دهیم.

با توجه با داکیومنت‌‌های API سایت CoinDesk، مشاهده می‌کنیم که api url

https://api.coindesk.com/v1/bpi/currentprice.json

است.

پس ابتدا یک پراپرتی data ایجاد می‌کنیم تا داده‌هایمان را در آن ذخیره کنیم و سپس با استفاده از فانکشن mounted به API درخواست گرفتن داده‌ را ارسال می‌کنیم و داده‌های گرفته شده در پراپرتی data ذخیره و در نهایت در template نمایش می‌دهیم:

new Vue({
     el: '#app',
     data () {
          return {
               info: null
          }
     },
     mounted () {
         axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(response => (this.info = response))
     }
})

<div id=&quotapp&quot>
     {{ info }}
</div>

و خروجی کارمان شبیه به زیر می‌شود:

حالا ما داده‌ها را در اختیار داریم اما همانطور که مشاهده می‌کنید بسیار نامرتب و شلوغ پلوغ هستند. بنابر‌این بریم هم نحوه نمایش داده‌ها را مرتب کنیم و هم با اضافه کردن error handling، کاربر را از وقوع مشکلات احتمالی مطلع سازیم.

نمایش داده‌های API

ما قصد داریم تا در برنامه‌مون قیمت بیت‌کوین را در واحد پول کشورهای مختلف نمایش دهیم و اگر به داده‌های JSON‌ای که دریافت کردیم دقت کنید، مشاهده می‌کنید که مواردی که بهشون نیاز داریم در response.data.bpi قرار دارند. پس حالا اگر به‌جای کل response فقط response.data.bpi را درخواست کنیم، خروجی‌مان بدین شکل خواهد شد:

axios
     .get('https://api.coindesk.com/v1/bpi/currentprice.json')
     .then(response => (this.info = response.data.bpi))

حالا به شکل زیر HTML‌مون رو آپدیت می‌کنیم تا فقط اطلاعاتی که بهشون نیاز داریم رو نمایش بده. همچنین،‌ با استفاده از یک filter از درست بودن جای اعشار مطمئن میشیم:

<div id=&quotapp&quot>
     <h1>Bitcoin Price Index</h1>
     <div
          v-for=&quotcurrency in info&quot
          class=&quotcurrency&quot
      >
          {{ currency.description }}:
          <span class=&quotlighten&quot>
               <span v-html=&quotcurrency.symbol&quot></span>{{ currency.rate_float | currencydecimal }} 
         </span>
     </div>
</div>

filters: {
     currencydecimal (value) {
          return value.toFixed(2)
     }
},

خروجی:

کنترل خطاها

ممکن است گاهی اوقات بنا به دلایلی مانند وجود مشکل در ارتباط اینترنت موفق به دریافت اطلاعات از API نشویم و نیاز که کاربر را از این خطا‌های احتمالی مطلع سازیم که این کار را به شکل زیر با استفاده از catch انجام می‌دهیم:

axios
     .get('https://api.coindesk.com/v1/bpi/currentprice.json')
     .then(response => (this.info = response.data.bpi))
     .catch(error => console.log(error))

بدین شکل می‌توانیم از مشکلات احتمالی در درخواست API مطلع شویم. اما اگر دیتا‌ها خراب باشن و یا API از کار افتاده باشد چی؟ الان کاربر چیزی از این ارورهارا نمی‌تواند ببیند. شاید بهتر باشه که یک loader بسازیم و سپس به کاربر اطلاع بدیم که قادر به دریافت داده‌ها نیستیم:

new Vue({
     el: '#app',
     data () {
     return {
          info: null,
          loading: true,
          errored: false
     }
},
     filters: {
          currencydecimal (value) {
          return value.toFixed(2)
     }
},
mounted () {
     axios
     .get('https://api.coindesk.com/v1/bpi/currentprice.json')
     .then(response => {
          this.info = response.data.bpi
     })
     .catch(error => {
           console.log(error)
           this.errored = true
     })
      .finally(() => this.loading = false)
     }
})

<div id=&quotapp&quot>
     <h1>Bitcoin Price Index</h1>

     <section v-if=&quoterrored&quot>
          <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
     </section>

     <section v-else>
           <div v-if=&quotloading&quot>Loading...</div>

          <div
               v-else
               v-for=&quotcurrency in info&quot
               class=&quotcurrency&quot
           >
                {{ currency.description }}:
                <span class=&quotlighten&quot>
                     <span v-html=&quotcurrency.symbol&quot></span>{{ currency.rate_float | currencydecimal }}
               </span>
          </div>

     </section>
</div>

حالا هربار با اجرای کدمان، هنگام گرفتن دیتا از API، یک لودینگ نمایش داده خواهد شد.

در این مقاله سعی کردم تا کلیات لایبری Axios در Vue.js را بطور خلاصه توضیح بدم. امیدوارم که این آموزش براتون مفید بوده باشه.