這次帶給大家vue中ajax請求與axios包完美處理,vue中ajax請求與axios包處理的注意事項有哪些,下面就是實戰案例,一起來看一下。
在vue中,常常會用到資料請求,常用的有:vue-resourse、axios
今天我說的是axios的post請求
github原始檔及文件位址:【https://github.com/axios/axios】
首先,引入axios
CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入:import axios from 'axios';
•get請求
axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
•post請求
依赖于qs包,将对象转换成以&连接的字符串 //例: axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) { console.log(response); })
附錄:設定axios
上面封裝的方法中,使用了axios 的三個配置項,實際上只有url 是必須的,完整的api 可以參考使用說明
為了方便,axios 也為每種方法起了別名,例如上面的saveForm 方法等價於:
axios.post('/user', context.state.test02)
完整的請求還應包括.then 和.catch
.then(function(res){ console.log(res) }) .catch(function(err){ console.log(err) })
當請求成功時,會執行.then,否則執行.catch
這兩個回呼函數都有各自獨立的作用域,如果直接在裡面存取this,無法存取到Vue 實例
這時只要增加一個.bind(this) 就能解決這個問題
.then(function(res){ console.log(this.data) }.bind(this))
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是vue中ajax請求與axios包完美處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!