ajax 與 axois
ajax 全名爲 Asynchronous JavaScript and XML,異步執行的請求,通過回調函數獲得響應。傳統的ajax基於XMLHttpRequesr(XHR), 但由於方式混亂等原因,實際應用很說,JQuery ajax 是對ajax的封裝,應用廣泛。 在vue項目中,不引用jquery的ajax,
vue1.x的時候,vue官方推出了vue下的異步請求,vue-resource,但在vue2.0推出後,vue作者宣佈不再更新vue-resource,建議開發者使用axois 【Promise based HTTP client for the browser and node.js】
官方github: https://github.com/axios/axios
快速上手
單請求
根據官方文檔,通過 cdn引入,即可快速使用
<script src="http://vue.syficy.com"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
mounted() {
console.log("v1")
axios.get("http://vue.syficy.com")
.then(response => {
console.log(response)
console.log("v2")
}).catch(err=>{
console.log("v3")
console.log(err)
})
console.log("v4")
}
})
我們可以看到,先執行了外部的v1,請求代碼塊後的v4,再執行了內部成功的v2。
單請求+settimeout
爲了探究請求的同時是同時執行的後面的語句,使用一個for循環
console.log("v1")
axios.get("http://vue.syficy.com")
.then(response => {
console.log(response)
console.log("v2")
}).catch(err=>{
console.log("v3")
console.log(err)
})
console.log("v4")
for(var i = 0; i< 10; i++){
setTimeout(()=>{
console.log("v5")
},20)
}
但當將settimeout的值改爲15的時候
這就比較奇怪了,仔細一想可能是for循環的關係,於是手動添加:
console.log("v1")
axios.get("http://vue.syficy.com")
.then(response => {
console.log(response)
console.log("v2")
}).catch(err=>{
console.log("v3")
console.log(err)
})
console.log("v4")
setTimeout(()=>{
console.log("v5")
},1)
setTimeout(()=>{
console.log("v5")
},2)
setTimeout(()=>{
console.log("v5")
},3)
setTimeout(()=>{
console.log("v5")
},5)
setTimeout(()=>{
console.log("v5")
},10)
setTimeout(()=>{
console.log("v5")
},150)
}
我們可以發現,axios開始執行後,不會等待then,而是先執行後面的代碼,等到then結束去執行then裏的代碼,然後繼續執行後面的代碼。