es6 with axios login user and get respons

Question

I am a newbie at using es6 js, using babel, axios and es6 trying to login user and get a response from a PHP file and all I need is return the response pass it to a callback function. When login is a console logged I get undefined but I want to get access to the data returned just for references.

account.js

 export class Account{
        constructor(){

        }
        methodGet(method,url,inputData,callback){
            axios({
                method:method,
                url:url,
                data: {
                    logindata: inputData
                }
            })
            .then(response=>{callback(response)});
        }

        login(formdata){
            this.methodGet('get','user/logs/login.php',formdata,function (params) {
                let dataParam = params.data;
                return dataParam;
            });
        }
    }

app.js

    import { Account } from "./classes/account.js";
    let account = new Account();

    let form  = document.getElementById('form');

    form.addEventListener('submit',event=>{
        event.preventDefault();
        let formdata = new FormData(this);
        console.log(account.login(formdata));
    },true);

You are mixing callbacks and Promises. Pick one paradigm and stick with it. — zero298, Jul 11 '18 at 16:28
I don't see `console.log` in your example. It's unclear where you expect which value. — Felix Kling, Jul 11 '18 at 16:28
You are `console.log`ing the value returned from `login()`, which is `undefined` — kit, Jul 11 '18 at 16:41
Make yourself clear with what are callback and promise first, and also learn how sync/async functions work in JavaScript. — kit, Jul 11 '18 at 16:42

score 1 · Accepted Answer · answered Jul 11 '18 at 17:00

I've been there man, it happens with almost all of us. I would suggest you to go understand the basics of promises. Believe me it's one of the most important concept for async operations in JS, it will help you a lot.

I've done few changes in your, please try this.

account.js

export class Account{
            constructor(){

            }
            methodGet(method,url,inputData){
                return axios({
                    method:method,
                    url:url,
                    data: {
                        logindata: inputData
                    }
                })
            }

            login(formdata){
                return this.methodGet('get','user/logs/login.php',formdata)
            }
        }

app.js

 import { Account } from "./classes/account.js";
    let account = new Account();

    let form  = document.getElementById('form');

    form.addEventListener('submit',event=>{
        event.preventDefault();
        let formdata = new FormData(this);
        account.login(formdata).then((response)=>{console.log(response.data)})
    },true);

Now let me explain what's happening. Whenever you make a request, it's an async task, so axios will return you a promise. A promise will have states (pending, resolved, rejected). After sending the request the promise returned by the axios will have state pending until response is got. If response is successful the then the state will go to resolve(then), or else reject(catch).

So only when you will have your response back, the promise state will go to resolve and using then you can access your response, if the state of the promise in pending you will get undefined because you literally don't have the response yet..

Therefore wait till you have response. Then print(console.log) it.

I hope it helps.

thanks man realy appriciate thats what i am studying now promises and callbacks — Nevil Saul Blemuss, Jul 11 '18 at 22:06
ok I just decided to work with XMLHttpRequest its easy creating a promise chain... thanks — Nevil Saul Blemuss, Jul 12 '18 at 10:27

es6 with axios login user and get respons

account.js

app.js

1 Answers1