Мой асинхронный javascript выполняется в середине другой функции

Question

Я пытаюсь выполнить функцию после другой в Vue. js. Я уже пробовал async / await, функции обратного вызова, .then, но он почему-то не хочет загружать одну за другой. Какое возможное решение?

auth_mixin. js:

async auth () {
            console.log("authban")
            var token = this.getCookie("token")
            var jsonData = {}
            jsonData["token"] = token
            console.log(jsonData)
            var bodyFormData = new FormData();
            bodyFormData.append('data', JSON.stringify(jsonData));
            axios({
                    method: 'post',
                    url: 'backend/index.php?action=checkAuth',
                    data: bodyFormData,
                    headers: {'Content-Type': 'multipart/form-data'}
                    })
                    .then(function (response) {
                      console.log(response);
                      if(response.data.status==="OK"){
                        console.log("ok")
                        return true;
                      }else{
                        console.log("nem ok")
                        return false;
                      }
                    })
                    .catch(function (response) {
                        console.log(response);
                        return false;
                    });
           }

Navbar. vue:

created () {
    var result=false
    this.auth().then(this.checkIfLoggedIn(result))
  },
  methods: {
      checkIfLoggedIn (isLoggedIn) {
        console.log("na ez lesz az erdekes   "+isLoggedIn)
      if(isLoggedIn === true){
        console.log("true")
        document.getElementById("logged_out").style.display="none";
        document.getElementById("logged_in").style.display="block";
      }else{
        console.log("fail");
      }
    }
  }

Answer 1

this.auth().then(this.checkIfLoggedIn(result))

У вас две проблемы.

Первое: this.checkIfLoggedIn(result) звонки checkIfLoggedIn немедленно . Вам нужно передать функцию в then.

this.auth().then(() => this.checkIfLoggedIn(result))

Второе: с этим изменением вы вызываете checkIfLoggedIn, когда auth разрешает.

Так, когда auth разрешает ? Ну, это определено с ключевым словом async, поэтому оно разрешается, когда оно returns (если только оно не возвращает обещание, и в этом случае вместо этого оно принимает это обещание).

Так что же оно возвращает? У него нет оператора return, поэтому он возвращает undefined, когда добирается до конца ... что происходит сразу после вызова axios (поскольку вы не await этого не делаете).

Если вы return изменили возвращаемое значение axios(...).etc, оно не будет разрешено, пока не будет выполнено обещание .

(Кроме того, вы используете async, вероятно, вам следует рефакторинг для использования await, try {} catch() {} вместо .then() и .catch()).