JavaScript-Asycn

JavaScript 回调

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

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

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

myCalculator(5, 5, myDisplayer);

在上面的例子中， myDisplayer 是函数的名称。

它作为参数传递给 myCalculator()。

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

正确：myCalculator(5, 5, myDisplayer);

错误：myCalculator(5, 5, myDisplayer());

异步 JavaScript

setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "yes i do";
}

JavaScript Promise 对象

Promise 对象属性

JavaScript Promise 对象可以是：

• Pending
• Fulfilled
• Rejected

Promise 对象支持两个属性：state 和 result。

myPromise.state	myPromise.result
"pending"	undefined
"fulfilled"	结果值
"rejected"	error 对象

您无法访问 Promise 属性 state 和 result。

您必须使用 Promise 方法来处理 Promise。

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = 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);}
);

Async 语法

"async and await make promises easier to write"

async 使函数返回 Promise

await 使函数等待 Promise

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

async function myFunction() {
  return "Hello";
}

等同于：

async function myFunction() {
  return Promise.resolve("Hello");
}

实例

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Await 语法

函数前的关键字 await 使函数等待 promise：

let value = await promise;

await 关键字只能在 async 函数中使用。

等待超时

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

myDisplay();

浏览器支持

ECMAScript 2017 引入了 JavaScript 关键字 async 和 await。

下表注明了首个完全支持两者的浏览器版本：

Chrome	IE	Firefox	Safari	Opera
Chrome 55	Edge 15	Firefox 52	Safari 11	Opera 42
2016 年 12 月	2017 年 4 月	2017 年 3 月	2017 年 9 月	2016 年 12 月