npm安裝

npm install axios --save

main.js導入

// 引入axios，并加到原型鏈中 import Axios from 'axios' import QS from 'qs' Vue.prototype.$axios = Axios Vue.prototype.qs = QS

各子模塊中使用，通過原型鏈 this.$axios ......

get實例

<div id="app"><h1>網站列表</h1><divv-for="site in info">{{ site.name }}</div> </div> <script type = "text/javascript"> new Vue({el: '#app',data () {return {info: null}},mounted () {axios.get('https://www.xxxx.com/try/ajax/json_demo.json').then(response => (this.info = response.data.sites)).catch(function (error) { // 請求失敗處理console.log(error);});} }) </script>

post實例

<script> new Vue({el: '#app',data () {return {info: null}},mounted () {axios.post('https://www.xxxxx.com/try/ajax/demo_axios_post.php', {firstName: 'Fred', // 參數 firstNamelastName: 'Flintstone' // 參數 lastName}).then(response => (this.info = response)).catch(function (error) { // 請求失敗處理console.log(error);});} }) </script>

執行多個并發請求

function getUserAccount() {return axios.get('/user/12345'); }function getUserPermissions() {return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 兩個請求現在都執行完成}));

axios API

axios(config) // 發送 POST 請求 axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'} }); // GET 請求遠程圖片 axios({method:'get',url:'http://bit.ly/2mTM3nY',responseType:'stream' }).then(function(response) {response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) }); axios(url[, config]) // 發送 GET 請求（默認的方法） axios('/user/12345');

?

總結

以上是生活随笔為你收集整理的vue使用axios并存数据到state的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。