vue请求数据

vue请求数据

（1）使用vue-resource请求数据，vue官方请求方法

1、需要安装vue-resource模块， 注意加上 --save

npm install vue-resource --save / cnpm install vue-resource --save

2、main.js引入 vue-resource

import VueResource from 'vue-resource'
/*使用*/
Vue.use(VueResource)

3、在里请求数据

①get获取方法

<script>
	export default{
        methods:{
        	/*请求数据*/
            getData(){
            	/*定义请求的地址*/
                var api='url',
                /*请求函数get方法*/
                this.$http.get(api).then(function(response){
                    console.log(response);
                    this.data=response.body.result;
                },function(err){
                    console.log(err)
                })
                /*改写成箭头函数*/
                 this.$http.get(api).then((response)=>{
                    console.log(response);
                    this.data=response.body.result;
                },(err)=>{
                    console.log(err)
                })
            },
        },
     /*加载时就请求数据*/
        mounted(){
            this.getData();
        }
	}
</script>

②post方法

/**新增数据 */
    addData() {
      var api = "url";
      this.$http.post(api,data
      /*例子{name:this.catchData.name}*/
		).then((data)=>{
        console.log('data',data)/*检验上传数据*/
      })
    },

③delete方法

/**删除数据 */
    deleteTeaData(id) {
      var api = "url";
      this.$http.delete(api+id+"/").then((response) =>{
        console.log('查看删除', response)
      })      
    },

④put方法

/**修改数据 */
    updateData(id) {
      var api = "url";
      this.$http.put(api+id+"/",data
        /*例子{name:this.catchData.name}*/             
        ).then((data)=>{
        console.log('data',data)
      })
    },

注意：mounted生命周期函数和methods是同级的而不是放到methods里面

（2）第三方封装函数axios,（fetch-jsonp方法和axios类似这里不做记录）

1、安装axios

npm install axios --save

2、哪里用哪里引用

import Axios from 'axios'

3、直接使用

<script>
	export default{
        methods:{
        	/*请求数据*/
            getData(){
            	/*定义请求的地址*/
                var api='url',
                /*请求函数get方法*/
                    Axios.get(api).then(function(response){
                        console.log(response);
                    	this.data=response.data.result;
                    }).catch(function(err){
                        console.log(err);
                    })
             /*改写成箭头函数*/
                    Axios.get(api).then((response)=>{
                        console.log(response);
                    	this.data=response.data.result;
                    }).catch((err)=>{
                        console.log(err);
                    })
            },
        },
     /*加载时就请求数据*/
        mounted(){
            this.getData();
        }
	}
</script>