2.6JavaScript语言的异步编程:回调(Callback)、期约(Promise)、async/await

1.回调函数

回调函数是作为参数传递给另一个函数的函数。

当您将回调函数作为参数传递时,请记住不要使用括号。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 回调</h1>

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

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

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

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);
</script>

</body>
</html>

2.基于回调的异步编程

在早期的JavaScript中,只支持定义深度嵌套的回调函数(俗称“回调地狱”)来支持异步编程。

//异步函数double()
function double(value) {
  setTimeout(() => setTimeout(console.log, 0, value * 2), 1000);
}

double(3);
// 输出6(大约1000毫秒之后)

3.基于Promise引用类型的异步编程

Promise引用类型的对象代表了一个异步操作的最终成功或失败。

Promise状态

Promise.state说明Promise.result
待定(pending)初始状态或正在执行中,既没有被兑现,也没有被拒绝。undefined
已兑现(fulfilled)有时候也称为“已解决”(resolved),表示已经成功。value
已拒绝(rejected)表示没有成功。Error 对象

通过”执行函数”处理Promise状态

Promise 对象是由关键字 new 及其构造函数来创建的。该构造函数会把一个叫做“执行函数”(executor function)的函数作为它的参数。这个“执行函数”接受两个函数——resolve 和 reject ——作为其参数。当异步任务顺利完成且返回结果值时,会调用 resolve() 函数;而当异步任务失败且返回失败原因(通常是一个错误对象)时,会调用reject() 函数。

let myPromise = new Promise(function(resolve, reject) {
    resolve(); // 成功时
    reject();  // 出错时
});

Promise.then()处理结果

myPromise.then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);

4.基于async/await的异步编程

asyncawait关键字让我们可以用一种更简洁的同步方式的风格写异步行为的代码。

async关键字用于声明异步函数,这个关键字可以用在函数声明、函数表达式、箭头函数和方法上。

await关键字具有暂停和恢复执行异步函数 await关键字 后面代码的能力,这个行为与生成器函数中的 yield 关键字是一样的。异步函数至少含有一个 await关键字,不然异步函数等同于普通函数。

async函数一定会返回一个Promise对象。

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

async/await的缺陷

await 关键字会阻塞其后的代码,直到promise完成。

而我们实际想要的是所有的这些promise同时开始处理,可以通过将 Promise 对象存储在变量中来同时开始它们,然后等待它们全部执行完毕。

async function timeTest() {
  const timeoutPromise1 = timeoutPromise(3000);
  const timeoutPromise2 = timeoutPromise(3000);
  const timeoutPromise3 = timeoutPromise(3000);

  await timeoutPromise1;
  await timeoutPromise2;
  await timeoutPromise3;
}

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/javascript/javascriptlang/10069.html

(0)
上一篇 2020年9月6日 06:50
下一篇 2020年9月7日 15:08

相关推荐

发表评论

登录后才能评论