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里的代码，然后继续执行后面的代码。