Vue(axios)发送网络请求调取API并展示数据

大家好！今天发现一个很好用且免费的数据api，想在这给大家分享一下！

一、天行数据

这是一个很全面新闻信息的一个数据接口平台，有很多免费的接口供大家来调取。没有账号的免费注册一个即可调用。

 我们随便申请一个免费的接口，成功之后他会给我们一个接口的地址以及一个专属于你自己的apikey，每次调用的时候都需要把这个apikey传回来，不然是没法调取的。apikey可以在个人中心找的。

 申请完接口之后我们就可以直接调用了，今天我向大家分享的是用Vue(axios)来发请求调用并实现数据的展示。

二、发送请求并展示数据

1.引入

首先我们要引入Vue以及axios，不然是没用的。

2.发送请求

接下来到了发送请求了，首先我们要有挂载点，然后使用axios发送请求，在这里我发送的是get请

求，代码如下：

到了这里我们就可以展示数据了。展示数据的代码如下：

            

				

					
{{news.ctime}}
					
{{news.title}}
				
			

数据成功展示。

如果大家觉得不好看可以加上样式，比如用Element-ui，在这里给大家分享一下代码（前提是要引入Elemetn-ui所需要的js和css文件并且在挂载点内才能实现效果，不然是不行的！！！！！）

 加上样式变得稍微好看了一点。效果如下：

 至此，整个接口调用以及数据展示就实现了！

总结

Vue(axios)调接口还是很简单的，只需要写对地址，传对参数即可！希望对大家能起到帮助！记得留个赞！(如有侵权请私信我)谢谢！