js 数据回调异步 Promise-编程知识

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>