Как использовать Vue.js и Axios для отображения данных из API

  <div class="container" id="app">
      <h3 class="text-center">Cryptocurrency Pricing</h3>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> BTC in USD  </p>
          </div>
          <div class="card-divider">
            <p>{{ BTCinUSD }}</p>
          </div>
        </div>
      </div>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> BTC in EURO  </p>
          </div>
          <div class="card-divider">
            <p>{{ BTCinEURO }}</p>
          </div>
        </div>
      </div>
    </div>

Теперь сохраните файл и перезагрузите его в браузере. Приложение теперь отображает цену биткойна как в евро, так и в долларах США.

На этом шаге вы создали свое приложение Vue с некоторыми образцами данных, чтобы убедиться, что оно загружается. До сих пор мы выполняли всю работу в одном файле, поэтому теперь мы разделим все на отдельные файлы, чтобы улучшить удобство сопровождения.

Шаг 2 — Разделение JavaScript и HTML для ясности

Чтобы узнать, как все работает, мы поместили весь код в один файл. На этом шаге вы разделите код приложения на два отдельных файла: index.html и vueApp.js. Файл index.html будет обрабатывать разметку, а файл JavaScript будет содержать логику приложения. Мы будем хранить оба файла в одном каталоге.

Сначала измените файл index.html и удалите код JavaScript, заменив его ссылкой на файл vueApp.js.

Найдите этот раздел файла:

...
    <script src="https://unpkg.com/vue@3"></script>
    <script> 
        const { createApp } = Vue
        
        createApp({    
          data() {
            return {
              BTCinUSD: 3759.91,
              BTCinEURO: 3166.21
            }
          }             
        }).mount('#app')
    </script>
...

И измените его, чтобы он выглядел так:

...
    <script src="https://unpkg.com/vue@3"></script>
    <script src="vueApp.js"></script>
...

Затем создайте файл vueApp.js в том же каталоге, что и файл index.html.

В этот новый файл поместите тот же код JavaScript, который изначально был в файле index.html, но без тегов <script>:

 const { createApp } = Vue
        
createApp({    
  data() {
    return {
      BTCinUSD: 3759.91,
      BTCinEURO: 3166.21
    }
  }  
}).mount('#app')

Сохраните файл и перезагрузите index.html в браузере. Вы увидите тот же результат, что и раньше.

Здесь вы отделили приложение от разметки. Затем вы добавите больше данных для поддержки большего количества криптовалют, чем просто биткойн.

Шаг 3 — Использование Vue для перебора данных

На этом этапе вы реструктурируете данные и измените представление, чтобы отображались цены как для биткойнов, так и для Ethereum.

Откройте файл vueApp.js и измените часть return модели данных, чтобы она выглядела следующим образом:

const { createApp } = Vue
      
createApp({
  data() {
    return { 
        results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
    }
  }
}).mount('#app')

Наша модель данных стала немного сложнее благодаря вложенной структуре данных. Теперь у нас есть ключ с именем results, который содержит две записи: одну для цен на биткойны, а другую для цен на эфириум. Эта новая структура, на наш взгляд, позволит нам уменьшить некоторое дублирование. Это также напоминает данные, которые мы получим от Cryptocompare API.

Сохраните файл.

Теперь давайте изменим нашу разметку, чтобы обрабатывать данные более программным способом.

Откройте файл index.html и найдите этот раздел файла, где мы отображаем цену биткойнов:

...
    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in USD  </p>
        </div>
        <div class="card-divider">
          {{BTCinUSD}}
        </div>
      </div>
    </div>

    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in EURO  </p>
        </div>
        <div class="card-divider">
          {{BTCinEURO}}
        </div>
      </div>
    </div>

  </div>
...

Замените его этим кодом, который выполняет итерацию по определенному вами набору данных.

...
  <div class="columns medium-4" v-for="(result, index) in results">
    <div class="card">
      <div class="card-section">
        <p> {{ index }} </p>
      </div>
      <div class="card-divider">
        <p>$ {{ result.USD }}</p>
      </div>
      <div class="card-section">
        <p> &#8364 {{ result.EUR }}</p>
      </div>
    </div>
  </div>
...

Этот код использует директиву v-for, которая действует как цикл for-loop. Он перебирает все пары ключ-значение в нашей модели данных и отображает данные для каждой из них.

При перезагрузке в браузере вы увидите фиктивные цены:

Эта модификация позволяет нам добавить новую валюту к данным results в vueApp.js и отображать ее на странице без дальнейших изменений.

Добавьте еще одну фиктивную запись в набор данных с выделенной информацией, чтобы попробовать это:

const { createApp } = Vue
      
createApp({
  data() {
    return {
        results: {"BTC": {"USD":3759.91,"EUR":3166.21}, 
        "ETH": {"USD":281.7,"EUR":236.25},
        "NEW Currency":{"USD":5.60,"EUR":4.70}}
    }
  }
}).mount('#app')

Включите запятую после записи Ethereum. Сохраните файл.

Если вы сейчас загрузите страницу в веб-браузере, вы увидите новую запись:

Когда мы обрабатываем данные программно, нам не нужно добавлять новые столбцы в разметку вручную.

Здесь вы использовали образцы данных для просмотра цен в нескольких валютах. Теперь давайте получим реальные данные с помощью Cryptocompare API.

Шаг 4 — Получение данных из API

На этом этапе вы замените смоделированные данные реальными данными из API Cryptocompare, чтобы показать цену биткойнов и эфириума на веб-странице в долларах США и евро.

Чтобы получить данные для нашей страницы, мы сделаем запрос на https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR, который запрашивает Биткойн и Эфириум в долларах США и евро.

Используйте curl, чтобы сделать запрос к API, чтобы увидеть ответ в сеансе терминала:

curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'

Вы увидите такой вывод:

Output
{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}

Этот результат похож на жестко закодированную модель данных, которую вы использовали на предыдущем шаге, но с текущими значениями биткойнов и эфириума. Все, что нам нужно сделать сейчас, это отключить данные, сделав запрос к этому URL-адресу из нашего приложения.

Чтобы сделать запрос, мы будем использовать функцию mounted() из Vue в сочетании с функцией GET библиотеки Axios, чтобы получить данные и сохранить их в results массив в модели данных. Функция mounted вызывается после монтирования приложения Vue к элементу. Как только приложение Vue будет смонтировано, мы отправим запрос к API и сохраним результаты. Веб-страница будет уведомлена об изменении, и значения появятся на странице.

Сначала откройте index.html и загрузите библиотеку Axios, добавив скрипт под строкой, в которую вы включили Vue:

...
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="vueApp.js"></script>
...

Сохраните файл, затем откройте vueApp.js.

Измените и обновите vueApp.js, чтобы он делал запрос к API и заполнил модель данных результатами.

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const { createApp } = Vue
      
createApp({    
  data() {
    return {
        results:[]
    }
},
    mounted() {
        axios.get(url).then(response => {
            this.results = response.data
        })
  }
}).mount('#app')

Обратите внимание, что мы удалили значение по умолчанию для results и заменили его пустым массивом. У нас не будет данных при первой загрузке нашего приложения, но представление HTML ожидает, что некоторые данные будут перебираться при загрузке.

Функция axios.get использует обещание. Когда API успешно возвращает данные, выполняется код в блоке then, и данные сохраняются в нашей переменной results.

Сохраните файл и перезагрузите страницу index.html в веб-браузере. На этот раз вы увидите текущие цены на криптовалюты.

Если вы ничего не видите, вы можете ознакомиться с разделом «Как использовать консоль разработчика JavaScript» и использовать консоль JavaScript для отладки своего кода. Обновление страницы данными из API может занять минуту.

Вы также можете просмотреть этот репозиторий.

На этом шаге вы изменили свое приложение, чтобы вызывать оперативные данные для проверки.

Заключение

Менее чем за пятьдесят строк вы создали приложение, использующее API, используя всего три инструмента: Vue.js, Axios и API Cryptocompare. Вы узнали, как отображать данные на странице, перебирать результаты и заменять статические данные результатами из API.

Теперь, когда вы понимаете основы, вы можете добавить в свое приложение другие функции. Измените это приложение, чтобы отображались дополнительные валюты, или используйте приемы, изученные в этом руководстве, для создания других веб-приложений с использованием другого API.