Vue axios 读取api.github.com展示用户信息

前言

本文是基于Vue axios 读取api.github.com展示用户信息功能原理的简单介绍，由于初学Vue有太多的不懂，导致数据展示以及Vue data数据的提取和传递造成了巨大的阻碍，在这里分享一些过程。

Vue作为一个没有入侵性的框架，并不限制你使用ajax框架。
使用了Vue后，ajax部分你可以做如下选择：

1.使用JS原生XHR接口

2.引入JQuery或者Zepto 使用$.ajax();

3.使用Vue官方推荐的axios

4.Vue的github上提供了vue-resource插件 ：

5.使用fetch.js

6.自己封装一个ajax库

首先，axios是什么?

axios 是基于 promise 的 HTTP 客户端，用于页面和后台数据的网络交互。

github地址：传送门

为什么要用axios？

开源、独立

它是**Vue的官方推荐**

使用方法(参考axios文档)

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

本文中axios的使用实例：

                    axios

                        .get("https://api.github.com/users/"+this.username)
                        .then(function(response) {
                            app.result = response.data;
                            console.log("succeed",app.result);
                        })
                        .catch(error => {
                            console.log(error);
                            this.errored = true;
                        })
                        .finally(() => this.loading = false);

api.github.com是什么？

一个github官方提供的接口。可以在这详细了解：GitHub REST API v3

这里用的：接口

主角Vue，介绍该页面使用Vue展示数据遇到的一些困难及解决方法

1. 由于Vue这个特性的存在，导致从接口获取到的json数据无法直接赋值给Vue的·data·属性，所以我们得在data里提前声明一个result：

data声明：

data:{

      result:[],

      },

赋值

app.result = response.data;

2. 通过获取到data里的value图片地址，添加到<img>标签的src=""的地址栏中，从而实现图片展示，我第一反应是使用{{ data.url }}的形式传入，但是{{}}写在引号里就不管用了，所以：

   <img v-bind:src="result.avatar_url">
   

   需要使用Vue的v-bind指令绑定data里的属性，result.avatar_url就是github api中用户头像的图片地址。

3. 使用 v-for 展示所有数据：

       <!-- {{result}} -->
                       <dl class="dl-horizontal"  v-for="(value, key) in result">
                           <dt>{{key||"无"}}</dt>
                           <dd>{{value||"无"}}</dd>
                       </dl>
   

   值得注意的是，(value, key)的顺序。

项目源码：github repository

END