0

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

    2023.04.29 | admin | 157次围观

    大家好!今天发现一个很好用且免费的数据apijs当前页面网络请求js当前页面网络请求,想在这给大家分享一下!

    一、天行数据

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

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

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

    二、发送请求并展示数据 1.引入

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

        
    		
    		NBA新闻
    		
    		
    		
    		
    	

    2.发送请求

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

    求,代码如下:

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

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

    数据成功展示。

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

                
    				
    				
    				
    				
    					
    				
    				
    					
    				
    			

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

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

    总结

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

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    标签: vueapi接口
    发表评论