Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板

本文首发：《Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板 - 卡拉云》

Axios 是一个基于 Promise 的 HTTP 请求库，它用在 node.js 和浏览器里。本教程教你如何使用 Axios 库发出 API 请求远程调取数据。

在本教程中，你将学到如何使用 Vue + Axios 搭建一套加密币实时行情看板，你会学到 Axios 如何向加密货币行情 API 请求数据，存储数据，然后使用 Vue 在前端展示这些数据，最终完成「实时行情看板」的搭建。为了让看板看起来更漂亮，我们将使用 Foundation CSS 框架。

本教程将手把手教你如何通过 Axios 读取 API 数据，搭建一套加密币实时价格看板。

「加密币实时行情看板」最终效果。前端使用 Vue + Axios，后端调用加密币行情 API，读完本教程，你也能搭建一套属于自己的加密币行情数据看板。

如何安装 Axios

可以使用以下简单方法之一将 Axios 添加到我们的项目/代码中：

npm：

npm install axios

bower：

bower install axios

yarn：

yarn add axios

CDN 方法一：

CDN 方法二：

我们还是来一起搭一个实战项目来学习如何使用 Axios 吧，请务必跟随本教程一起操作。

第 1 步：创建一个最简单的 Vue Web APP

我们先来创建一个最简单的 Vue APP，循序渐进，方便大家理解。

我们新建一个 index.html 文件，先在这个页面里写入一组模拟数据，使用 Vue.js 来显示这个模拟数据。后文我们会用真实的 API 来进行替换。





  
   卡拉云 - 加密币实时行情 


  
    
       卡拉云 - 加密币实时行情
      
        
          
             比特币：人民币 
          
          
             {{ BTCinCNY }}

在这段 HTML 文件里，我们通过 CDN 加载了 Foundation CSS 框架和 Vue.js。只需简单两行，他们就被加载进来，无需下载到本地。

从 Vue.js 中获取的数据会映射到 {{ BTCinCNY }} 里，这就是 Vue 在 HTML 中呈现数据的方式。

我们来定义一下 {{ BTCinCNY }}

在的下面添加以下代码，我们来创建一个新的 Vue app 并定义在 index.html 页面上显示的数据结构：

...

    
...

这段代码创建了一个新 Vue 应用实例，并将这个实例赋到「 id = app 」到元素上。Vue 把这个过程叫做加载应用。我们定义了一个新 Vue 实例，通过配置对象对这个应用进行配置，[el](https://v3.cn.vuejs.org/api/application-api.html#el) 指定了加载应用对应的元素 ID，以及包含的数据。

在这个实例中，包含一组「key-value」即 { BTCinCNY: 73759.99 } 这组数据会通过以下代码显示在 HTML 页面上。


 {{ BTCinCNY }}

更新 index.html 我们在浏览器中打开，显示效果如下图

我们再来加上比特币的美元价格，在 index.html 中修改加入美元价格。

然后向标记（div）中添加美元显示的表格部分

...

      
        
           比特币：美元  
        
        
          {{BTCinUSD}}
        
      
    
...

index.html 的完整修改版。请将这段代码更新至 index.html



  
    
    
     卡拉云 - 加密币实时行情 
  

  
    
       卡拉云 - 加密币实时行情
      
        
          
             比特币：人民币 
          
          
             {{ BTCinCNY }} 
          
        

      
      
        
          
             比特币：美元 
          
          
            {{ BTCinUSD }}

更新 index.html 后，在浏览器打开显示效果如下：

扩展阅读：《Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器》

第 2 步：分离 JavaScript 和 HTML

在第 1 步中，为了给大家更好的展示工作原理，我们将所有代码都放在 index.html 一个文件中，现在我们要把前端和后端数据分成两个独立的文件存放，即 index.html和vueApp.js 。

在 index.html中，显示比特币对应的多种价格。而在 vueApp.js 文件中，用于读取数据。将显示和数据页面拆分开来，更便于我们日常维护。

我们先把 index.html 文件中 JavaScript 的代码删掉，将这段指向 vueApp.js 文件

...
    
    
...

将 vm 整段删掉，替换为指向 vueApp.js 的 ...

然后，在 index.html 的存放目录中，新建 vueApp.js 文件，代码如下：

const vm = new Vue({
        el: '#app',
        data: { BTCinCNY: 73759.99,BTCinUSD: 3759.91 }
      });

保存 vueApp.js 文件并在浏览器重新打开 index.html ，你会发现显示结果没有任何变化。

下一步，我们加入更多加密币的实时行情。

第 3 步：使用 Vue 加载数据

当前页面我们加载了比特币的模拟价格，我们再来加上一个以太币的模拟价格。我们来重构一下视图和模拟数据。

打开vueApp.js文件，修改数据，代码如下：

const vm = new Vue({
        el: '#app',
        data: {
          results: {"BTC": {"CNY":73759.99,"USD":3166.21}, 
                    "ETH": {"CNY":33581.77,"USD":2336.25}}}
      });

由于数据的嵌套结构，我们使用 results 作为键，它包含两条记录，一个是比特币价格，一个是以太币价格。这种结构合并同类项，让数据展示和读取更简洁。

接着我们打开index.html文件并找到显示加密币的部分：

...
    
      
        
           比特币：人民币  
        
        
          {{BTCinCNY}}
        
      
    

    
      
        
           比特币：美元  
        
        
          {{BTCinUSD}}

Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板

如何安装 Axios

第 1 步：创建一个最简单的 Vue Web APP

卡拉云 - 加密币实时行情

卡拉云 - 加密币实时行情

第 2 步：分离 JavaScript 和 HTML

第 3 步：使用 Vue 加载数据

第 4 步：使用 Axios 从 API 读取数据

前端搭起来太费劲？

Axios 各类调用方式

Axios 响应对象架构

Axios 响应数据

Axios 错误处理

使用 async-await 处理 Axios 错误

Axios GET 请求

Async / await:

Axios GET 带参数请求

Axios GET 带 headers 请求

Axios GET 同时带参数和 headers 请求

Axios PUT 请求

Axios POST 带 body 请求

Axios POST 带 headers 请求

Axios PUT 带 headers 请求

Axios DELETE 请求

Axios DELETE 带 headers 请求

Vue + Axios 搭建总结

你可能感兴趣的:(Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板)