Vue之axios
阿新 • • 發佈:2018-12-04
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) {
//兩個請求現已完成
}));