Vue.js学习（9）-Vue.js通过Http请求数据 vue-resource

  1.请求数据的模块vue-resource   https://github.com/pagekit/vue-resource

•   vue-resource  是官方提供的vue的一个插件
•   axios
•   fetch-json

2.模块初始化

npm install vue-resource --save

3.基本语法

// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
    // 响应成功回调
}, function(response){
    // 响应错误回调
});
// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
    // 响应成功回调
}, (response) => {
    // 响应错误回调
});

支持的http方法

vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：

• get(url, [options])
• head(url, [options])
• delete(url, [options])
• jsonp(url, [options])
• post(url, [body], [options])
• put(url, [body], [options])
• patch(url, [body], [options])

option属性

发送请求时的options选项对象包含以下属性：

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	Object, FormData string	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调处理函数
credentials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON	boolean	将request body以application/x-www-form-urlencoded content type发送

 

4.Vue.js通过vue-resource进行http数据请求

• 需要安装vue-resource模块

npm install vue-resource --save

• main.js引入 vue-resource
• 调用 Vue.use(VueResource);
• 在组件中里面直接使用

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

 

实现如下：

F:\test\vue\vuedemo02>npm install vue-resource --save

main.js

import VueResource from 'vue-resource'
Vue.use(VueResource);

Home.vue

<template>
    <div>
      <br>
      <hr>
      <button @click="getData()">请求数据</button>
      <br>
      <ul>
        <li v-for="item in list">
          {{item.title}}
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "Home",
      data(){
          return{
            msg:"Home.vue是一个首页组件",
               list:[],
          }
      },
      methods:{
          getData(){
        var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
        this.$http.get(api).then(function (response) {
          console.log(response);
          this.list = response.body.result;
        },function (err) {
          console.log(err);
        })
        }
      },
      mounted(){
       this.getData();
      },
    }
</script>