JS学习——异步
学习内容来源：JavaScript 回调、异步的 JavaScript、JavaScript Promise、JavaScript Async
JavaScript 回调
回调 (callback) 是作为参数传递给另一个函数的函数。
这种技术允许函数调用另一个函数。
回调函数可以在另一个函数完成后运行。
函数序列
JavaScript 函数按照它们被调用的顺序执行。而不是以它们被定义的顺序。
// txt = "Goodbye"
let txt;
function myDisplayer(some) {
txt = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
顺序控制
// 假设您要进行计算，然后赋值。
let txt;
function myDisplayer(some) {
txt = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
// 或者，可以调用 myCalculator，并让 myCalculator 函数调用 myDisplayer
let txt;
function myDisplayer(some) {
txt = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
JavaScript 回调
回调是作为参数传递给另一个函数的函数。
// 使用回调，可以通过回调调用 myDisplayer，并在计算完成后让 myCalculator 运行回调
let txt;
function myDisplayer(some) {
txt = some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
异步的 JavaScript
与其他函数并行运行的函数称为异步（asynchronous）。
回调最常与异步函数一起使用。
JavaScript 中有很多关于异步函数的例子，在这里只列举了 setTimeout() 和 setInterval()
等待超时
在使用 JavaScript 函数 setTimeout() 时，可以指定超时时执行的回调函数
// myFunction 被用作回调。函数（函数名）作为参数传递给 setTimeout()。
// 3000 是超时前的毫秒数，所以 3 秒后会调用 myFunction()。
let txt;
setTimeout(myFunction, 3000);
function myFunction() {
txt = "3 seconds later"
}
注意：将函数作为参数传递时，请记住不要使用括号。
- 正确：setTimeout(myFunction, 3000);
- 错误：setTimeout(myFunction(), 3000);
// 若不将函数的名称作为参数传递给另一个函数，始终可以传递整个函数
// function(){ myFunction("I love You !!!"); } 用作回调。它是一个完整的函数。完整的函数作为参数被传递给 setTimeout()。
// 3000 是超时前的毫秒数，所以 3 秒后会调用 myFunction()。
let txt;
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
txt = value;
}
等待间隔
在使用 JavaScript 函数 setInterval() 时，可以指定每个间隔执行的回调函数
// 1000 是间隔之间的毫秒数，因此 myFunction() 将每秒调用一次
let count = 0;
setInterval(myFunction, 1000);
function myFunction() {
count++;
}
JavaScript Promise
JavaScript Promise 对象
JavaScript Promise 对象包含生产代码和对消费代码的调用
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）
myResolve(); // 成功时调用
myReject(); // 出错时调用
});
// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(
function(value) { /* 成功后续再处理的代码 */ },
function(error) { /* 出错后续再处理的代码 */ }
);
当执行代码获得结果时，它应该调用两个回调之一：
| 结果 | 调用 |
|---|---|
| 成功 | myResolve(result value) |
| 出错 | myReject(error object) |
Promise 对象属性
JavaScript Promise 对象可以是：
- Pending
- Fulfilled
- Rejected
当 Promise 对象 "pending"（工作）时，结果是 undefined。
当 Promise 对象 "fulfilled" 时，结果是一个值。
当 Promise 对象 "rejected" 时，结果是一个错误对象。
| myPromise.state | myPromise.result |
|---|---|
| "pending" | undefined |
| "fulfilled" | 结果值 |
| "rejected" | error 对象 |
注意：无法访问 Promise 属性 state 和 result。必须使用 Promise 方法来处理 Promise。
如何使用 Promise
// Promise.then() 有两个参数，一个是成功时的回调，另一个是失败时的回调。
// 两者都是可选的，因此您可以为成功或失败添加回调。
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
// myPromise 判断后把 myResolve() 作为回调函数，然后执行 function(value) {myDisplayer(value);}
// txt ="OK"
let txt;
function myDisplayer(some) {
txt = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// 生成代码（这可能需要一些时间）
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
// setTimeout() 使用 Promise 的例子
let txt;
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
txt = value;
});
JavaScript Async
- async 使函数返回 Promise
- await 使函数等待 Promise
Async 语法
函数前的关键字 async 使函数返回 promise
async function myFunction() {
return "Hello"; // 等同于 return Promise.resolve("Hello");
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
// 或者更简单，因为期望正常值（正常响应，而不是错误）
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Await 语法
函数前的关键字 await 使函数等待 promise
注意：await 关键字只能在 async 函数中使用。
// txt = "I love You !!"
let txt;
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
myResolve("I love You !!");
});
txt = await myPromise;
}
myDisplay();
// setTimeout() 使用 async/await 的例子
// 3 秒后 txt = "I love You !!"
let txt;
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
txt = await myPromise;
}
myDisplay();
