async/await的用法

重构以前的vue项目，不看不知道，因为请求都是通过Promise封装的axios函数，一眼望过去都是.then(res => {...)，看着就烦

这有一篇axios请求封装升级版，就是用async/await这种方式封装了axios，研究了一下async/await，小小写了一个demo,

先试试：

mounted () {
   console.log(this.Http())    //  本以为这里会打印出我接口的返回值，但是它打印出的是一个Promise
},
methods: {
    async Http () {
        let instance = axios.create({
            baseURL:'http://192.168.0.125:8081/api',
            timeout:1000,
        })
        let api = {
            method: 'post',
            url: '/onlineMge'
        }
        let res =  instance[api.method](api.url,{mail: 33, tel: 15236552265})
        return res
    }
}

这是打印出的：

好的，继续查，发现这篇博客讲的字字珠玑，里面有一段是这样的：

我们当然希望它能直接通过 return 语句返回我们想要的值，但是如果真是这样，似乎就没 await 什么事了。
async函数返回的是一个 Promise 对象。从文档中也可以得到这个信息。async 函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。
现在回过头来想下，如果 async函数没有返回值，又该如何？很容易想到，它会返回 Promise.resolve(undefined)。

联想一下 Promise 的特点——无等待，所以在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise对象，并且，绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数并无二致

然后到这里我就明白了，直接return出去的是一个Promise，是因为它直接执行不等待，那我们用上await等等它，让它执行完毕拿到返回值，于是继续改：

mounted () {
    this.getList()
},
methods: {
    async Http (api) {
        let instance = axios.create({
            baseURL:'http://192.168.0.125:8081/api',
            timeout:1000,
        })
        let res =  instance[api.method](api.url,{mail: 33, tel: 15236552265})
        return res
    },
    async getList(){           //  这里用async是因为await会阻塞代码执行，所以它俩要一起使用
        let api = {
            method: 'post',
            url: '/onlineMge'
        }
        let res = await this.Http(api)      //  await等待执行结果
        
        console.log(res)         //  这里res就是我的接口返回值了
    },
}

看看这个打印：

到这里就完了，这个封装可以看看这篇博客，注释很详尽。