Bom, para você fazer uma requisição não assincrona é fácil com o axios
, veja o exemplo:
crie um uma pasta e dentro dela um arquivo com o nome de inicio.html
:
<!doctype html>
<html>
<head>
<title>AMD</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
</head>
<body class="container">
<h1>AMD</h1>
<div>
<h3>User</h3>
<div class="row">
<img id="useravatar" src="" class="col-md-1"/>
<div class="col-md-3">
<strong id="username"></strong>
</div>
</div>
<button type="button" id="load" onclick="loading()">load</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.min.js"></script>
<script>
requirejs.config({
paths: {
axios: 'axios'
}
});
const loading = async () => {
requirejs(['axios'], (axios) => {
axios.get('https://api.github.com/users/mzabriskie')
.then(function (user) {
//document.getElementById('useravatar').src = user.data.avatar_url;
document.getElementById('username').innerHTML = user.data.name;
console.log("sera executado depois que terminar a request");
});
});
console.log("sera executado antes de terminar a request");
}
</script>
</body>
</html>
dentro dessa pasta coloque um arquivo chamado axios.js
e o conteudo desse aquivo
você pode copiar e colar deste link
O axios é como o ajax mas ele tem uns super poderes a mais vamos se dizer assim, sua documentação esta neste link: axios. na maioria dos projetos frontend
que trabalho vejo o uso de axios ao inves do ajax
.
Abra o arquivo no seu navegador e veja o resultado no log.
.then(function (user) {
console.log("sera executado depois que terminar a request");
});
tudo dentro de then é rodado como sincrono ou seja, apos a requisição suas linhas serão executadas uma apos a outra.
já o que esta depois da função:
console.log("sera executado antes de terminar a request");
é executado de forma asyncrona ou seja é executado independente do codigo acima. (como se ele pulasse o código)