axios 異步請求

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裏的代碼,然後繼續執行後面的代碼。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章