As a new ES6 syntax, more and more people are learning and using Promise as a solution for asynchronous programming, which is more reasonable and powerful than the traditional solution callback function. Async functions are also simple and convenient syntax for Generator functions. Without further ado, let’s begin our vUE practice

How to write this time to achieve the corresponding requirements, use async/await, with promise, logic clear, elegant and beautiful

First we create a new file, global.js, to do the checking user login and location logic before we render the page

//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() {// Get user login informationreturn 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() {// Get rough user latitude and longitudereturn new Promise((resolve) => {
            axios
                .get("https://elm.cangdu.org/v1/cities?type=guess")
                .then(res => {
                    resolve(res)
                })
                .catch(error => {
                    resolve(res)
                });
        })
    }
    async getDetailLocationConst res = await this.getLocation(); 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;
Copy the code

The interface used in this code comes from github.com/bailicangdu… The build function is used to execute the corresponding logic after the user login and location is completed. It needs to be called in 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')})Copy the code

This is the perfect solution to the actual combat asynchronous programming problem, small partners feel useful words do not mean their praise oh, a praise is also love a praise is also love