async和promise小伙伴們應(yīng)該都很熟，作為ES6的新語法，現(xiàn)在被越來越多的人學(xué)習(xí)和使用
promise作為異步編程的一種解決方案，比傳統(tǒng)的解決方案回調(diào)函數(shù)更合理和強(qiáng)大，async函數(shù)作為Generator 函數(shù)的語法糖也是很簡單與方便的
話不多說，開始我們的vue實戰(zhàn)吧

流程圖.jpg

項目中，我們經(jīng)常性的會有類似這樣的需求，這樣的話就不能直接渲染webview了，比較要等到做完相應(yīng)的邏輯才可以渲染頁面了

這個時候怎么寫才能很好的實現(xiàn)相應(yīng)的需求呢，使用async/await，搭配promise，邏輯清晰明了，優(yōu)雅美觀

首先我們創(chuàng)建一個新的文件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() {
         //獲取粗略的用戶經(jīng)緯度
        return new Promise((resolve) => {
            axios
                .get("https://elm.cangdu.org/v1/cities?type=guess")
                .then(res => {
                    resolve(res)
                })
                .catch(error => {
                    resolve(res)
                });
        })
    }
    async getDetailLocation() {
        //獲取詳細(xì)的地理位置信息
        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項目中，十分感謝，這個項目作為業(yè)余時間練手的項目非常好，小伙伴們對vue感興趣的話推薦練一練
build函數(shù)是等用戶登錄和定位執(zhí)行完了以后再執(zhí)行相應(yīng)的邏輯，是需要在main.js進(jìn)行調(diào)用的
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 () => {
    //先進(jìn)行用戶登錄，定位再進(jìn)入app
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
})

這樣就完美的解決了實戰(zhàn)中異步編程的問題，小伙伴們覺得有用的話不要吝嗇自己的贊噢，一個贊也是情一個贊也是愛