js 数据回调异步 Promise

回调顺序

JavaScript 函数按照它们被调用的顺序执行。而不是以它们被定义的顺序。

js数据顺序问题

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 函数序列</h2>

<p>JavaScript 函数按照它们被调用的顺序执行。</p>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myFirst() {
  myDisplayer("Hello");
}

function mySecond() {
  myDisplayer("Goodbye");
}

mySecond();
myFirst();
//mySecond();
</script>

</body>
</html>

js 回调数据执行

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 回调</h2>

<p>进行计算，然后显示结果。</p>

<p id="demo"></p>

<script>
//（3）这个方法渲染数据 到页面 
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

//（2）两个数据带到这个方法里边
// 然后两个数据进行相加 赋值给了 sum  最后返回
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}
//（1）我输入了 两个数据
myCalculator(5, 5);
</script>

</body>
</html>

js 异步

等待超时

在使用 JavaScript 函数 setTimeout() 时，可以指定超时时执行的回调函数：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 回调</h1>

<p>等待 3 秒（3000 毫秒）让此页面发生变化。</p>

<h1 id="demo"></h1>

<script>
//定时器
setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 回调</h1>

<p id="demo"></p>

<script>
//调用方法渲染
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

//方法
function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "/demo/js/mycar.html");//请求
  req.onload = function() {//判断请求数据的真实性
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}

getFile(myDisplayer); 
</script>

</body>
</html>

js Promise

定义数据判断对错

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Promise</h1>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

//创建promise 方法 定义数据 x = 0 
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// 一些代码（请尝试将 x 改为 5）

//判断数据是不是等于 0  
//上边定义了 如果不等于 0  就会报错
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});


//监听数据
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>

promise 倒计时

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Promise</h1>

<p>等待 3 秒（3000 毫秒）让此页面发生变化。</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

js Async

Async 语法

函数前的关键字 async 使函数返回 promise：

Await 语法

函数前的关键字 await 使函数等待 promise：
let value = await promise;
await 关键字只能在 async 函数中使用。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript async / await</h1>

<p>请等待 3 秒（3000 毫秒）让此页面发生变化。</p>

<h1 id="demo"></h1>

<script>
async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>