Vue.js框架--axios请求数据（十二）

Dear 丶 2024-02-18 23:29 5阅读 0赞

**主要操作技能：**

vue本身是不支持发送ajax请求，需要通过其他库来实现的（比如vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios），或者也可以使用jquery来发送ajax请求;

*vue2.0版本已经不推荐vue-resurce了，官方推荐axios来发送, 先了解的是axios是一个基于Promise的HTTP请求客户端，用来发送请求。*

**axios本身具有以下特征：**

*  从浏览器中创建 XMLHttpRequest
 *  从 node.js 发出 http 请求
 *  支持 Promise API
 *  拦截请求和响应
 *  转换请求和响应数据
 *  取消请求
 *  自动转换JSON数据
 *  客户端支持防止 CSRF/XSRF

![70][]

![70 1][]

**编写代码：**

**Home.vue**

<template>
    	
    	<div id="home">
    		{
       {msg}}
    
    		<button @click="getData()">请求数据</button><br /><br />
    
    		<ul>
    			<li v-for="item in list">
    				{
       {item.aid}}--{
       {item.title}}
    			</li>
    		</ul>
    
    	</div>
    </template>
    
    <script>
    	/**
    	 *    
    	 *  axios使用
    	 *   1>安装 cnpm install axios --save
    	 *   2>哪里使用哪里引用  import Axios from 'axios'
    	 * 
    	 * 
    	 *  fetch-jsonp
    	 * 
    	 */
    	import Axios from 'axios';  
    	export default {
    		data() { //数据
    			return {
    				msg: '我是首页组件',
    				list: [] //存放请求数据
    			}
    		},
    		methods: { //方法
    			getData() {
    				//请求数据地址
    				var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
    
                    Axios.get(url).then((response)=>{
    //              	console.log(response);
                       //获取数据
                        this.list=response.data.result;
                    	
                    }).catch((error)=>{
                    	
                    	console.log(error);
                    })
    				
    			}
    		},
    		mounted() { //生命周期函数  (直接初始化数据到页面了哦！)
    			this.getData();
    		}
    
    	}
    </script>

App.vue同（十一）一样

**效果：**

**![70 2][]**

![70 3][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8707800bdd424edab73cfb61cce2ffee.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/58c9ff1e1bbb4089bcc2bf5c685b73ae.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fa7cbf277e24492f84275f094fa17e5a.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a44ab8a9d7f94bbc9d16f94ff3331355.png