نحوه کار با Http در الکترون

توسط کتابخانه Axios می توان در اپلیکیشن های الکترون از API ها جهت کار با درخواستهای http استفاده نمود. در این مطلب نحوه نصب و فراخوانی Axios را آموزش خواهیم داد.

نصب Axios

در خط فرمان کنسول و با استفاده از npm و دستور زیر Axios را نصب می کنیم:

$ npm install axios --save

سپس در فایلمان (مثلا) /src/index.js کد زیر را Import می کنیم:

const axios = require('axios');

حالا آماده استفاده از Axios برای ایجاد یک درخواست هستیم.

ایجاد درخواست

در فایل /src/index.js تابعی ایجاد کنید که قیمت BTC را بازیابی کند. (در این آموزش مثالی از دریافت قیمت بیت کویین با API زده شده است)
همانطور که میبینید بسیار ساده است:

// متغیر ثابت برای اختصار حذف شده
var price = document.querySelector('h1')
var targetPrice = document.getElementById('targetPrice')

function getBTC() {
    axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC&tsyms=USD')
    .then(res => {
        const cryptos = res.data.BTC.USD
        price.innerHTML = '$'+cryptos.toLocaleString('en')
    })
}
// کدهای دیگر به مظنور اختصار از مسیر حذف شده است.

ابتدا متغیری تعریف میکنیم که امکان دسترسی به عنصر h1 را فراهم کند بطوریه که قیمت BTC نمایان شود.
سپس کد Axios را در یک تابع قرار می دهیم، چون میخواهیم در یک فاصله کوتاه ۳۰ ثانیه ای آن را فراخوانیم.
به جای getBTC() از axios استفاده می کنیم. روش get() برای تعیین آدرس یک API عمومی آزاد برای داده ی CryptoCurrency، CryptoCompare نام دارد.
سپس، price.innerHTML را در پاسخ تنظیم میکنیم. از .toLocaleString برای نمایش آن در یک شماره قالب دار صحیح استفاده میکنیم.
در زیر دستور العمل getBTC()، اضافه کنید:

function getBTC() {
    ..
}
getBTC();
setInterval ( getBTC, 30000 );

هم در ابتدا و هم بعد هر ۳۰ ثانیه یک بار این را فرا میخواند.

اگر بخواهید می توانید حالا ارزش (price) جعلی در تگ های H1 فایل /src/index.html تعریف کرده بودید را حذف کنید.

< h1 id="price">loading..</h1 >

اگر بخواهید می توانید یک فایل گرافیکی نیز بارگذاری کنید.
اگر پروژه را ذخیره و npm start را اجرا کرده اید، باید ارزش جاری Bitcoin (BTC) نمایش داده شود.
هنگام نوشتن این آموزش، چنین اتفاقی می افتد:

btc
تاکنون پیشرفت های بزرگی بدست آورده ایم، اما هنوز تمام نشده. حالا باید برای اجازه دادن به یک کاربر برای تعیین یک ارزش (price) هشدار در add.html ویندوز، روی اضافه کردن قابلیت تمرکز کنیم و نیاز داریم این اطلاعات را به index.html ویندوز متصل کنیم. به این منظور در درس بعدی IPC در Electron را پوشش خواهیم داد.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit