1. 程式人生 > >Vue之axios

Vue之axios

axios 簡介
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特徵:


 1. 從瀏覽器中建立 XMLHttpRequest
 2. 從 node.js 發出 http 請求從 node.js 發出 http 請求
 3. 支援 Promise API支援 Promise API
 4. 攔截請求和響應攔截請求和響應
 5. 轉換請求和響應資料轉換請求和響應資料
 6. 取消請求取消請求
 7. 自動轉換JSON資料
 8. 客戶端支援防止 CSRF/XSRF客戶端支援防止 CSRF/XSRF

引入方式:

$ npm install axios
$ cnpm install axios //taobao源
$ bower install axios
或者使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

例子:
main.js註冊axios

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$axios = axios

new Vue({
  router,
  store,
  axios,
  render: h => h(App)
}).$mount('#app')

axios之get請求

getApi(){
      this.$axios.get("url")
      .then((res) => {
        console.log('111')
        console.log(res.data)
      })
      .catach((err) => {
        console.log('222')
        console.log(err)
      })
 

axios之post請求

axios.post('url', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

執行多個併發請求

function getUserAccount() {
return axios.get('url1');
}
 
function getUserPermissions() {
return axios.get('url2');
}
 
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//兩個請求現已完成
}));