3.vue请求数据

梁柱 2020-04-01 01:00:08
原文地址:https://segmentfault.com/a/1190000021906339

请求数据的方式:

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

vue-resource的使用

使用步骤:
1、安装vue-resource模块

cnpm install vue-resource --save  

2、在 main.js 引入 vue-resource

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

3、在组件里面直接使用

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

})

实例:
Info.vue

<template>
    <div id="info">
        <button @click="getData">获取数据</button>
        <ul>
            <li v-for="(item,index) in list" v-bind:key="index">
                {{item.title}}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Info",
        data() {
            return {
                list: []
            }
        },
        methods: {
            getData: function () {
                let 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() {
            this.getData();
        }
    }
</script>

如果getData()中不适用箭头函数,就需要注意this问题。

getData: function () {
    let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
    const _this = this;
    this.$http.get(api).then(function (res) {
        _this.list = res.body.result;
    }, function (err) {
        console.log(err);
    });
}

axios 的使用

axios 与 fetch-jsonp 同为第三方插件
1、安装

cnpm  install  axios --save

2、哪里用哪里引入axios

Axios.get(api).then((response)=>{
    this.list=response.data.result;
}).catch((error)=>{
    console.log(error);
})

fetch-jsonp 的使用

1、安装

cnpm  install  fetch-jsonp --save

2、哪里用哪里引入axios

fetchJsonp('/users.jsonp')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。