vue请求数据

vue-resource:

推荐教程：https://www.runoob.com/vue2/vuejs-ajax.html

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

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

2. main.js引入 vue-resource

import VueResource from 'vue-resource';

3. main.js

Vue.use(VueResource);

4. 在组件里面直接使用

this.$http.get(地址).then(function(res){

},function(err){

})

实例：

<template>
  <div>
    <h3>home组件</h3>
    <button @click="addList()">加载</button>
    <ul>
      <li v-for="item in list">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "home",
        data(){
            return{
                list:[]
            }
        },
        methods:{
            addList(){
                //请求数据
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                this.$http.get(api).then((res)=>{
                    this.list = res.body.result;
                },(err)=>{
                    console.log(err)
                })
            }
        },
        mounted() {  //请求数据，操作dom可在这进行
            console.log('模板编译完成4')
            this.addList();
        },
        beforeCreate() {
            console.log('实例刚刚被创建1')
        },
        created() {
            console.log('实例已经创建完成2')
        },
        beforeMount() {
            console.log('模板编译之前3')
        },

        beforeUpdate() {
            console.log('数据更新之前')
        },
        updated() {
            console.log('数据更新完毕')
        },
        beforeDestroy() {//页面销毁前报错数据
            console.log('实例销毁之前')
        },
        destroyed() {
            console.log('实例销毁完成')
        }
    }
</script>

<style scoped>

</style>

vue-resource 提供了 7 种请求 API(REST 风格)：
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

axios：

1.安装

cnpm install axios --save

2.哪里使用那里引入

<template>
  <div>
    <h3>home组件</h3>
    <button @click="addList()">加载</button>
    <ul>
      <li v-for="item in list">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "home",
        data(){
            return{
                list:[]
            }
        },
        methods:{
            addList(){
                //请求数据
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                axios.get(api).then((res)=>{
                    this.list = res.data.result;
                }).catch((err)=>{
                    console.log(err)
                })
            }
        },
        mounted() {  //请求数据，操作dom可在这进行
            console.log('模板编译完成4')
            this.addList();
        },
    }
</script>

<style scoped>

</style>

fetch：

https://github.com/camsong/fetch-jsonp

1.安装

cnpm install fetch-jsonp --save

 addList(){
                var $that = this
                //请求数据
                // //注意： 第一个.then 中获取到的不是最终数据，而是一个中间的数据流对象；
                // 注意： 第一个  .then 中获取到的数据， 是一个 Response 类型对象；
                // 注意： 第二个 .then 中，获取到的才是真正的 数据；
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                fetchJsonp(api,{
                    method:'get'
                }).then(function (res) {
                    res.json().then((json)=>{
                        console.log(json)
                        $that.list = json.result;
                    })
                }).catch(function (err) {
                    console.log('err',err)
                })
            }