vue实战问题3：async和promise解决异步编程

async和promise小伙伴们应该都很熟，作为ES6的新语法，现在被越来越多的人学习和使用
promise作为异步编程的一种解决方案，比传统的解决方案回调函数更合理和强大，async函数作为Generator 函数的语法糖也是很简单与方便的
话不多说，开始我们的vue实战吧

流程图.jpg

项目中，我们经常性的会有类似这样的需求，这样的话就不能直接渲染webview了，比较要等到做完相应的逻辑才可以渲染页面了

这个时候怎么写才能很好的实现相应的需求呢，使用async/await，搭配promise，逻辑清晰明了，优雅美观

首先我们创建一个新的文件Global.js，来做我们渲染页面前的检查用户登录与定位逻辑

//Global.js
import axios from 'axios'
class Global {
    constructor(Vue, store) {
        this.INDEX_PATH = '/';
        this.$vue = Vue;
        this.store = store;
    }
    async build() {
        this.user = await this.loginData();
        this.location = await this.getDetailLocation();
        return Promise.resolve();
    }
    init(vm) {
        this.$root = vm
    }
    loginData() {
        //获取用户登录信息
        return new Promise((resolve) => {
            axios
                .get("https://elm.cangdu.org/v1/user")
                .then(res => {
                    if (res.status == 200) {
                        this.store.commit("RECEIVE_USER_INFO", res.data);
                        this.store.commit("RECEIVE_USER_ID", res.data.user_id);
                        this.store.commit("RECEIVE_USER_ISLOGIN", res.data.is_active);
                        resolve(res)
                    }
                })
                .catch(error => {
                    resolve(error)
                });
        })
    }
    getLocation() {
         //获取粗略的用户经纬度
        return new Promise((resolve) => {
            axios
                .get("https://elm.cangdu.org/v1/cities?type=guess")
                .then(res => {
                    resolve(res)
                })
                .catch(error => {
                    resolve(res)
                });
        })
    }
    async getDetailLocation() {
        //获取详细的地理位置信息
        const res = await this.getLocation();
        return new Promise((resolve) => {
            if (res.data) {
                let location = res.data.latitude + "," + res.data.longitude;
                axios
                    .get("https://elm.cangdu.org/v2/pois/" + location)
                    .then(res => {
                        this.store.commit("RECEIVE_CITISE_LOCATION", res.data);
                        resolve(res.data)
                    })
                    .catch(error => {
                        resolve(error)
                    });
            }
        })
    }

}
export default Global;

本段代码中所用接口来自https://github.com/bailicangdu/vue2-elm项目中，十分感谢，这个项目作为业余时间练手的项目非常好，小伙伴们对vue感兴趣的话推荐练一练
build函数是等用户登录和定位执行完了以后再执行相应的逻辑，是需要在main.js进行调用的
main.js中

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '../store/index'
import Global from './common/Global'
window.$ = new Global(Vue, store);
$.build().then(async () => {
    //先进行用户登录，定位再进入app
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
})

这样就完美的解决了实战中异步编程的问题，小伙伴们觉得有用的话不要吝啬自己的赞噢，一个赞也是情一个赞也是爱