這篇文章主要介紹“vuejs如何請求后臺接口”，在日常操作中，相信很多人在vuejs如何請求后臺接口問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vuejs如何請求后臺接口”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

目前成都創(chuàng)新互聯(lián)已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、綿陽服務器托管、企業(yè)網(wǎng)站設(shè)計、競秀網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

vuejs請求后臺接口的方法：1、安裝axios并引入；2、使用get或post請求；3、安裝vue-resource并引入；4、使用vue-resource發(fā)送跨域請求。

本文操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vuejs怎么請求后臺接口？

vue請求后臺接口 方法：

ue不支持直接發(fā)送AJAX請求，需要使用vue-resource、axios等插件實現(xiàn)。

一.使用axios發(fā)送AJAX請求：

1.安裝axios并引入：

1）npm install axios -S （直接下載axios組件，下載完畢后axios.js就存放在node_modules\axios\dist中），首先在 main.js 中引入 axios：在此文件加入import axios from 'axios'，如果在其它的組件中無法使用 axios 命令?？梢詫?axios 改寫為 Vue 的原型屬性：Vue.prototype.$http=axios，在 main.js 中添加了這兩行代碼之后，就能直接在組件的 methods 中使用 this.$http命令。

2）網(wǎng)上直接下載axios.min.js文件,通過script src的方式進行文件的引入

2.發(fā)送請求：

1）get請求使用格式：

a：axios([options]) （這種格式直接將所有數(shù)據(jù)寫在options里，options其實是個字典）

b：axios.get(url[,options]);

2）post請求格式：

a：axios.post(url,data,[options]);

new Vue({
                el:'#itany',
                data:{
                    user:{
                        name:'alice',
                        age:19
                    },
                },
                methods:{
                    sendPost(){
                        // axios.post('server.php',{
                        //         name:'alice',
                        //         age:19
                        // }) //該方式發(fā)送數(shù)據(jù)是一個Request Payload的數(shù)據(jù)格式，一般的數(shù)據(jù)格式是Form Data格式，所有發(fā)送不出去數(shù)據(jù)
                        // axios.post('server.php','name=alice&age=20&') //方式1通過字符串的方式發(fā)送數(shù)據(jù)
                        axios.post('server.php',this.user,{  //方式2通過transformRequest方法發(fā)送數(shù)據(jù)，本質(zhì)還是將數(shù)據(jù)拼接成字符串
                            transformRequest:[
                                function(data){
                                    let params='';
                                    for(let index in data){
                                        params+=index+'='+data[index]+'&';
                                    }
                                    return params;
                                }
                            ]
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {
                            console.log('請求失敗：'+err.status+','+err.statusText);
                        });
                    },
                }
            });

3）發(fā)送跨域請求：

a:須知：axios本身并不支持發(fā)送跨域的請求，沒有提供相應的API，作者也暫沒計劃在axios添加支持發(fā)送跨域請求，所以只能使用第三方庫

b:使用vue-resource發(fā)送跨域請求

c: 安裝vue-resource并引入

　　　npm info vue-resource           #查看vue-resource 版本信息
   　　 cnpm install vue-resource -S #等同于cnpm install vue-resource -save

d: 基本使用方法（使用this.$http發(fā)送請求）

　　 this.$http.get(url, [options])
　　　 this.$http.head(url, [options])
　　　 this.$http.delete(url, [options])
　　　 this.$http.jsonp(url, [options])
　　　 this.$http.post(url, [body], [options])
　　 　this.$http.put(url, [body], [options])
　　　 this.$http.patch(url, [body], [options])

二.vue-resource發(fā)送請求：

1.安裝引入vue-resource方式：

1）npm install axios -S （直接下載axios組件，下載完畢后axios.js就存放在node_modules\axios\dist中），通過改路由的index.js引入：在index.js加入import VueResource from 'vue-resource'和Vue.use(VueResource)即可

2）網(wǎng)上直接下載axios.min.js文件，通過script src的方式進行文件的引入

2.post請求方式：

1)  this.$http({ method:'POST',  
                        url:'/a/b', //接口路徑 data:{'a':'123124'}, //參數(shù) 
                        headers: {"X-Requested-With": "XMLHttpRequest"}, 
                        }).then((res) => { if(res.body.code == "0") {
                        this.data= res.body.result;
                    } else {
                        this.warnMessage = "獲取班級失敗";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "訪問接口失敗";
                    this.colorMessage = "red"
                })
2）this.$http.post('../a/b/c', {}, {
                    header: {},
                    emulateJSON: true
                }).then((res) => {
                    if(res.body.code == "0") {
                        this.data= res.body.result;
                    } else {
                        this.warnMessage = "獲取班級失敗";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "訪問接口失敗";
                    this.colorMessage = "red"
                })

2.get請求方式同post，直接將上面的post改為get即可

到此，關(guān)于“vuejs如何請求后臺接口”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
名稱欄目：vuejs如何請求后臺接口
鏈接分享：http://weahome.cn/article/jsjhoj.html