vue網(wǎng)絡(luò)請(qǐng)求

一、使用vue官方的vue-resource 插件請(qǐng)求數(shù)據(jù)

1.安裝vue-resource :

        cnpm install vue-resource --save 
        //說(shuō)明:帶--save 或 -S 意思是將其寫入到package.json文件中,供拷貝代碼后添加使用

2.在main.js中引入vue-resource

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

3.在組件中直接使用:

    methods:{
        getListData(){//網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)
            var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
             //jsonp請(qǐng)求,需要后臺(tái)接口支持jsonp
             // this.$http.jsonp(api).then((response)=>{
            //get請(qǐng)求
            this.$http.get(url).then((response)=>{
                console.log("請(qǐng)求到的數(shù)據(jù):"+response);
                this.list = response.body.result;
            },(error)=>{
                console.log("請(qǐng)求錯(cuò)誤:"+error);
            })
        },
    },
    mounted(){//模板已經(jīng)編譯 -- 執(zhí)行請(qǐng)求數(shù)據(jù)的操作
        this.getListData();
    }

二、使用vue官方的axios 插件請(qǐng)求數(shù)據(jù)

1. 安裝  cnpm  install  axios --save
2.每一個(gè)地方使用網(wǎng)絡(luò)請(qǐng)求,就在那個(gè)地方引入axios,然后直接用就行
            import Axios from 'axios';
3.使用
         var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
            Axios.get(url).then((response)=>{
                    this.msglist=response.data.result;
                    console.log("請(qǐng)求到的數(shù)據(jù)66666:"+response);
                }).catch((error)=>{
                    console.log(error);
                })
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容