vue中使用vue-resource、axios、fetch-jsonp请求数据

1.使用vue-resource

• 安装vue-resource：

cnpm install vue-resource --save

• 去main.js文件配置vueResource（先导入，再使用）：

//导入vue-resouece
import vueResource from 'vue-resource';
//使用  与整个Vue实例进行关联，关联之后才能用vueResource进行请求
Vue.use(vueResource);

• 创建Mock.vue文件，在其中使用：

Mock.vue：可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Mock.vue

• 在App.vue中进行导入与配置：

方法见：“vue中创建单文件组件、注册组件、使用组件”

<template>
  <div id="app">
     <!-- 组件的使用 -->
     <v-Mock></v-Mock>
  </div>
</template>
<script>
// 导入组件
import Mock from './MyComponents/Mock.vue';
export default{
  name:"App",
  // 注册组件
  components:{
    'v-Mock':Mock
  }
  }
}
</script>
<style>  
</style>

• 在Mock.vue中请求数据：

<template>
    <div id="Mock">
        <p>{{msg}}</p>
    </div>
</template>
<script>
export default{
    name:"Mock",
    data(){
        return{
            msg:"我是Mock组件"
        }
    },
    mounted(){
        // 使用远程路径请求
        let url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
        this.$http.get(url).then((response)=>{
            console.log(response.body.result);
        });

        // 使用模拟数据请求    /user、/list为“vue中使用mock模拟数据”中模拟的两个接口
        //then表示请求完成之后，相当于success
        this.$http.post("/user").then((response)=>{
            console.log(response.body.data);
        });
        
        this.$http.post("/list").then((response)=>{
            console.log(response.body);
        });
    }
}
</script>
<style>

</style>

2.使用axios
请求mock数据、远程api、支持的是cros跨域

• 安装axios：

cnpm install axios --save

• 创建Axios.vue文件，在其中使用：

Axios.vue：可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Axios.vue

• 在App.vue中进行导入与配置：

方法见：vue中创建单文件组件、注册组件、使用组件

<template>
  <div id="app">
     <v-Axios></v-Axios>
  </div>
</template>
<script>
import Axios from './MyComponents/Axios.vue';
export default{
  name:"App",
  components:{
    'v-Axios':Axios
  }
  }
}
</script>

• 导入axios：

在哪里使用，在哪里导入

 import axios from 'axios'

• 在Axios.vue中请求数据：

局部axios

 <template>
     <div id="axios">
         <p>{{msg}}</p>
     </div>
 </template>
 <script>
 import axios from 'axios';
 export default {
     name:"Axios",
     data(){
         return{
             msg:"Axios插件"
         }
     },
     mounted(){
         // 使用远程路径请求
         let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
         axios.get(api).then((res)=>{
             console.log(res.data.result);
         });
     }
 }
 </script> 

Q：怎样将局部axios打包成全局axios？
A：去main.js文件配置axios：

//配置axios 全局使用  $后的名字为自定义
import axios from 'axios';
Vue.prototype.$axios=axios; 

使用时需写为：

 <template>
     <div id="axios">
         <p>{{msg}}</p>
     </div>
 </template>
 <script>
 export default {
     name:"Axios",
     data(){
         return{
             msg:"Axios插件"
         }
     },
     mounted(){
        // 使用远程路径请求
        let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
        this.$axios.get(api).then((res)=>{
            console.log(res);
        });
        
        // 使用模拟数据请求    /user、/list为“vue中使用mock模拟数据”中模拟的两个接口
        this.$axios.post("/user").then((res)=>{
            console.log(res.data.data);
        });
        
        this.$axios.post("/list").then((res)=>{
            console.log(res.data);
        });
     }
 }
 </script>

3.使用Fetch-jsonp
请求mock数据、远程api、支持的是jsonp跨域

• 安装fetch-jsonp：

cnpm install fetch-jsonp --save

• 创建Fetchjsonp .vue文件，在其中使用：

Fetchjsonp .vue：可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Fetchjsonp .vue

• 导入fetch-jsonp：

在哪里使用，在哪里导入

 import Fetchjsonp from 'fetch-jsonp'

• 在Fetchjsonp.vue中请求数据：

 <template>
     <div id="Fetchjsonp">
         <p>{{msg}}</p>
     </div>
 </template>
 <script>
 import Fetchjsonp from 'fetch-jsonp';
 export default {
     name:"Fetchjsonp",
     data(){
         return{
             msg:"Fetchjsonp"
         }
     },
     mounted(){
         let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
         Fetchjsonp(api).then((res)=>{
             return res.json();
         }).then((res)=>{
             console.log(res);
         });
     }
 }
 </script>