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

Creating DOM elements upon successful completion of an AJAX request with jQuery has never been easier. Here's a

Is there a way to restrict access to my website to only be opened in the Chrome browser?

I wish to trigger the function when the button with the ID "add_city" is clicked instead of it being activated upon pressing the Enter key as it currently is

Vue - Seamlessly Editing and Creating Content Together

What is the procedure for defining the secret code for a private key in saml2-js?

Having trouble with reactjs and typescript? Getting the error message that says "Type 'string' is not assignable to type 'never'"?

Having trouble with the Lottie player not loading a JSON object or string into the src attribute?

Testing an API request using Jasmine for unit testing

Passing props to another component using the <Link> element in React Router

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

Verifying conditions in an AJAX-based upload system using JavaScript

Sliding out list elements with jQuery ladder effect

Expecting a volumetric result can be deceiving when dealing with objects that have three flat

Let's compare the usage of JavaScript's toUTCString() method with the concept of UTC date

Utilize jQuery to generate an HTML table from a JSON array with rows (Issue: undefined error)

Java's equivalent to the return function in JavaScript

Locating numerous words within a given string

What could be the reason for encountering the error "logic is not defined" in this particular

Having trouble converting my form data into an array for table display

JavaScript: Discovering the art of "utilizing RESTful APIs"