一、概況

①vuejs中沒有內(nèi)置任何ajax請求方法

②在vue1.0版本，使用的插件 vue resource 來發(fā)送請求，支持promise

③在vue2.0版本，使用社區(qū)的一個第三方庫 axios ，也支持promise

④在HTML5時代，瀏覽器增加了一個特殊的異步請求方法 fetch，原生支持promise，由于兼容性問題，一般用于移動端

⑤還有的項目會使用vue和jquery混用，借助jQuery的ajax方法

二、axios庫的使用

①安裝和引入：

• npm直接下載axios組件，下載完畢后axios.js就存放在node_modules\axios\dist中

npm install axios

• 網(wǎng)上直接下載axios.min.js文件，或者使用cdn，通過script src的方式進(jìn)行文件的引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

②發(fā)送get請求

• 基本使用格式：

axios([options]) #這種格式直接將所有數(shù)據(jù)寫在options里，options其實(shí)是個字典 axios.get(url[,options]);

• 傳參方式：通過url傳參，通過params選項傳參
• 案例： <div id="app"><button @click='send'>發(fā)送Ajax請求</button><button @click='sendGet'>GET方式發(fā)送Ajax請求</button></div><script src="node_modules/vue/dist/vue.js"></script><script src="node_modules/axios/dist/axios.min.js"></script><script>new Vue({el:'#app',data:{user:{name:'eric',age:24},},methods:{send(){axios({method:'get',url:'http://www.baidu.com?name=jack&age=30'}).then(function(resp){console.log(resp.data);}).catch(err=>{console.log('請求失敗:'+err.status+','+err.statusText);});},sendGet(){axios.get('server.php',{params:{name:'tom',age:20}}).then(resp=>{console.log(resp.data)}).catch(resp=>{console.log('請求失敗:'+err.status+','+err.statusText);});},},});</script>

③發(fā)送post請求（push,delete的非get方式的請求都一樣）

• 基本使用格式

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

• 傳參方式：自己拼接為鍵值對；使用transformRequest，在請求發(fā)送前將請求數(shù)據(jù)進(jìn)行轉(zhuǎn)換；如果使用模塊化開發(fā)，可以使用qs模塊進(jìn)行轉(zhuǎn)換；
• 注意：axios默認(rèn)發(fā)送post數(shù)據(jù)時，數(shù)據(jù)格式是Request Payload，并非我們常用的Form Data格式，所以參數(shù)必須要以鍵值對形式傳遞，不能以json形式傳參
• 案例：

<div id="app"><button @click='sendPost'>post方式發(fā)送Ajax請求</button></div><script src="node_modules/vue/dist/vue.js"></script><script src="node_modules/axios/dist/axios.min.js"></script><script>new Vue({el:'#app',data:{user:{name:'eric',age:24},},methods:{sendPost(){axios.post('server.php',this.user,{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);});},},});</script>

④發(fā)送跨域請求：axios本身并不支持發(fā)送跨域的請求，沒有提供相應(yīng)的API，作者也暫沒計劃在axios添加支持發(fā)送跨域請求，所以只能使用第三方庫，可以使用vue-resource發(fā)送跨域請求

轉(zhuǎn)載于:https://www.cnblogs.com/EricZLin/p/9380406.html

總結(jié)

以上是生活随笔為你收集整理的Vuejs发送Ajax请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。