2.5JavaScript语言的回调(Callable)、异步(Asynchronous)、期约(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 必然处于以下几种状态之一:

  • 待定(pending): 初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled): 意味着操作成功完成。
  • 已拒绝(rejected): 意味着操作失败。
Promise.statePromise.result
“pending”undefined
“fulfilled”value
“rejected”error 对象

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

let myFirstPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时,我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中,我们使用setTimeout(...)来模拟异步代码,实际编码时可能是XHR请求或是HTML5的一些API方法.
    setTimeout(function(){
        resolve("成功!"); //代码正常执行!
    }, 250);
});

myFirstPromise.then(function(successMessage){
    //successMessage的值是上面调用resolve(...)方法传入的值.
    //successMessage参数不一定非要是字符串类型,这里只是举个例子
    console.log("Yay! " + successMessage);
});

4.Async/Await

asyncawait关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,去除了到处都是 .then() 代码块。

async关键字用于声明异步函数,这个关键字可以用在函数声明、函数表达式、箭头函数和方法上,并且其中允许使用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();

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

发表评论

登录后才能评论