nested axios call with await in vue js

Question

i am new to async and i have an action in vuex that get user's info and i put that in promise and i want to use this method in then block of axios call for login with await because data of user info is important for me my problem is i cant use await in then block and error says the error says await can only be use in async function this flow is correct and what is correct way?

store.js:

actions: {
    loadUserInfo({commit}){
        const headers = {
            'Content-Type': 'application/json',
            // 'Authorization': localStorage.getItem('access_token'),
            'Accept': 'application/json'
        }
        return new Promise(function(resolve, reject) {
            axios.get(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_EDIT_INFO,{headers: headers})
                .then(response => {
                    commit('authenticateUser');
                    commit('setUserInfo', response.data.result);
                    resolve();
                })
                .catch(error => {
                    console.log(error);
                    reject();
                })
        });

    }
},

Login.vue:

        async login () {
            let self = this;
            axios.post(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_LOGIN,
                this.loginInfo
            ).
             then(function (response) {
                await this.$store.dispatch('loadUserInfo').then((res)=>{
                    this.$emit('authenticateUser', true);
                    this.$emit('registeredIdentification', self.$store.getters.getUsername)
                    this.$router.push({ name: 'mainBox' })
                });


                localStorage.setItem('access_token', response.data.result.access_token)
                localStorage.setItem('refresh_token', response.data.result.refresh_token)
            })
                .catch(function (error) {
                    // let statusCode = error.response.status;
                    console.log(error);
                });



        }

Avocado · Accepted Answer · 2021-05-02 14:28:22Z

1

try moving the async declaration so it is "inside" the then:

        async login () {
            ...
            .then(async function (response) {
                await this.$store.dispatch('loadUserInfo').then((res)=>{
            ...
        }

Using then with async/await may be unnecessary:

async login() {
  try {
    const loginUrl = process.env.VUE_APP_BASE_URL + process.env.VUE_APP_LOGIN;
    const { data } = await axios.post(loginUrl, this.loginInfo)
    const { access_token: accessToken, refresh_token: refreshToken } = data.result;
    await this.$store.dispatch('loadUserInfo');
    this.$emit('authenticateUser', true);
    this.$emit('registeredIdentification', this.$store.getters.getUsername)
    this.$router.push({ name: 'mainBox' })
    localStorage.setItem('access_token', accessToken)
    localStorage.setItem('refresh_token', refreshToken)
  } catch (error) {
    console.log(error);
  }
}

edited May 2, 2021 at 14:28

answered Nov 12, 2019 at 20:26

Avocado

9117 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

nested axios call with await in vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related