标题: JavaScript Async [打印本页]

---

作者: vicky.yu    时间: 2023-1-9 15:18     标题: JavaScript Async

JS Promise
DOM 简介
"async and await make promises easier to write"

async 使函数返回 Promise

await 使函数等待 Promise

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

实例
async function myFunction() {
  return "Hello";
}
等同于：

async function myFunction() {
  return Promise.resolve("Hello");
}
以下是使用 Promise 的方法：

myFunction().then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);
实例
async function myFunction() {
  return "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：

let value = await promise;
await 关键字只能在 async 函数中使用。

实例
让我们慢慢来学习如何使用它。

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

myDisplay();
亲自试一试
等待超时
async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
亲自试一试
等待文件
async function getFile() {
  let myPromise = new Promise(function(myResolve, myReject) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function() {
      if (req.status == 200) {myResolve(req.response);}
      else {myResolve("File not Found");}
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

getFile();
亲自试一试
浏览器支持
ECMAScript 2017 引入了 JavaScript 关键字 async 和 await。

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

---

欢迎光临 赛捷软件论坛 (http://sagesoft.cn/bbs/)

Powered by Discuz! 7.2