0

я пишу простую логинку. Логика сверить данные которые пришли с апишки и в случаи true выдать "Admin access granted". Но проблема что в returnе промиса у меня тру, при введённых username: admin, pass: admin строка 57. А вот в вызове метода на 71 строке у меня промис (я ожидаю результат ретурна, тойсть тру)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>      
input {
outline: none;
display: block;
width: 100%;
margin: 0 0 20px;
padding: 10px 15px;
border: 1px solid #ccc;
color: rgb(0, 0, 0);
font-family: "Roboto";
box-sizing: border-box;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: 0.2s linear;
}
button {
cursor: pointer;
background: #44c4e7;
width: 100%;
padding: 10px 15px;
border: 0;
color: #fff;
font-family: "Roboto";
font-size: 14px;
font-weight: 400;
}
</style>
<title>Document</title>
</head>
<body>

<ul class="header__links">
    <li><input placeholder="Username" type="text" id="username"></input></li>
    <li><input placeholder="Password" type="password" id="password"></input></li>
    <li><button id="submit">Login</button></li>
  </ul>


<div id="us"></div>


<script>


class logIn {
    constructor() {
      this.URL = 'https://5f5f9ecadf620f00163e6011.mockapi.io/weather/users';
    }


async getUsers() {
  const response = await fetch(`${this.URL}`);
  const responseData = await response.json();
  return console.log(responseData[0].user === document.getElementById('username').value &amp;&amp; responseData[0].password === document.getElementById('password').value);
  // return responseData[0].user === document.getElementById('username').value &amp;&amp; responseData[0].password === document.getElementById('password').value;
}



}


class InputData extends logIn {
    constructor() {
      super();
    }
  }
  const userPassword = new InputData()


submit.onclick = function() {
    const checkData = userPassword.getUsers();
    console.log(checkData);
      if(checkData === true) {
        // document.getElementById('us').innerHTML="Admin access granted";
        console.log(checkData);
      }
    // document.getElementById('us').innerHTML="Admin access granted";
};


</script>


</body>
</html>
Лиза Журина
  • 11

1 Answers1

1

Если я правильно понял вопрос, проблема в том, что у вас возвращается Promise из-за того что вы вызываете функцию объявленну через async.

Соответсвенно для того что бы получить не Promise, а результат - вам нужно либо в onclick передавать асинхронную функцию и делать await:

submit.onclick = async function(){
    const checkData = await userPassword.getUsers();
    /* ... */
}

Либо нужно использовать then:

submit.onclick = function(){
    userPassword.getUsers().then(checkData => {
        /* ... */
    });
}

Promise | MDN

Ein
  • 2,493