Having difficulties integrating a login solution due to an error saying "eslint Promise executor functions should not be async no-async-promise-executor"

Question

Having difficulties integrating a login solution due to an error saying "eslint Promise executor functions should not be async no-async-promise-executor"

I'm currently working on integrating a login solution into my Vue app using the JWT Authentication plugin.

While I have a test solution that is functional, I'm facing an issue in my main branch where the eslint version seems to be causing an error with "Promise executor functions should not be async no-async-promise-executor".

The code within my 'store' and under my actions looks like this:

login({ commit }, credentials){
  return new Promise(async (resolve, reject) => {
    try {
      const { data }  = await axios.post(`https://mywebsite.com/wp-json/jwt-auth/v1/token`, credentials)
      commit('SET_USER', data)
      resolve(data)
    }catch(e){
      reject(e)
    }
  })
},
validate({ state }) {
  return axios({
    url: `https://mywebsite.com/wp-json/jwt-auth/v1/token/validate`, 
    method: 'post',
    headers: {
      'Authorization': `Bearer ${state.user.token}`
    }
  })
},

I'm unsure how to refactor this code to resolve the error. Any suggestions?

javascript vue.js promise vuex eslint

Answer 1

Answer №1

It appears that there may be some confusion regarding async/await usage. When utilizing async/await, there is no need to wrap it within a Promise object. Simply include the async keyword in the method and utilize await appropriately.

var app = new App({
    methods: {
        async authenticate({ commit }, credentials) {
            try {
                const { data } = await axios.post(
                    `https://myapi.com/authenticate`,
                    credentials
                );
                commit("SET_USER", data);
            } catch (error) {
                console.log(error);
            }
        },
        checkValidity({ state }) {
            return axios({
                url: `https://myapi.com/check-validity`,
                method: "post",
                headers: {
                    Authorization: `Bearer ${state.user.token}`,
                },
            });
        },
    },
});

Answer 2

It appears that there may be some confusion regarding async/await usage. When utilizing async/await, there is no need to wrap it within a Promise object. Simply include the async keyword in the method and utilize await appropriately.

var app = new App({
    methods: {
        async authenticate({ commit }, credentials) {
            try {
                const { data } = await axios.post(
                    `https://myapi.com/authenticate`,
                    credentials
                );
                commit("SET_USER", data);
            } catch (error) {
                console.log(error);
            }
        },
        checkValidity({ state }) {
            return axios({
                url: `https://myapi.com/check-validity`,
                method: "post",
                headers: {
                    Authorization: `Bearer ${state.user.token}`,
                },
            });
        },
    },
});

Having difficulties integrating a login solution due to an error saying "eslint Promise executor functions should not be async no-async-promise-executor"

Answer №1

Similar questions

Issue with HighCharts Series Data Points Not Being Added

Complete a form when a link or button on the webpage is clicked

Is there a way to automatically dismiss a notify.js notification?

Adding the location of the onClick event to the hook - a step-by-step guide

Is window.open exclusive to Firefox?

``There seems to be a problem with the ngb time picker when using the up and

implement a discount and waive tax computation specifically for Canadian customers

Encountered an issue when attempting to create meanjs using yo

Tips on handling jsonp responses in CakePHP without using the .json extension

Leveraging the power of Framer Motion in combination with Typescript

Navigate through each of the pictures within the folder and encode them into base64

Clicking the button in Angular should trigger a series of functions to be

JavaScript's getElementById function may return null in certain cases

Encountering an error message stating "Please enable JavaScript to run this application" when making React API calls after deploying a ReactJs app on the Firebase server

Getting the value of a variable within the scope of AngularJS can be achieved by utilizing

Ways to update a component when the value of a Promise is altered

Utilizing the layout of nuxt-child over the parent's design

Subtracting 25% from the width of the web browser

Transforming a React, Redux, and MUI Menu into an Electron Application

Utilize the data stored in chrome.storage within the Vue.js data