二十一、ES8 新特性

（一）async 函数

1.async 和 await 两种语法结合可以让异步代码像同步代码一样

• 返回值为 Promise 对象

2.Promise 对象的结果由 async 函数执行的返回值决定

1）返回的结果为非 Promise 对象

• async 函数返回值是成功的 Promise 对象
• 且对象值为 return 的值

2）返回的结果抛出错误

• async 函数返回值是失败的 Promise 对象
• 且值为抛出的错误

3）返回的结果为 Promise 对象

• async 函数返回值由 return 的 Promise 对象返回值决定

async function fn() {
  // return 'ikuko';

  // throw new Error('出错啦!');

  return new Promise((resolve, reject) => {
    resolve("成功的数据!");
    // reject('失败的错误!');
  });
}
const res = fn();
console.log(res);
// Promise {<fulfilled>: 'ikuko'}

// Promise {<rejected>: Error: 出错啦! at fn (http://localhost:5500/ECMAScript6-11/39.ES8-async%E5%87%BD%E6%95%B0.html:35:…}

// Promise {<pending>}

res.then(
  (value) => {
    console.log(value);
  },
  (reason) => {
    console.warn(reason);
  },
);

（二）await 表达式

• await 必须写在 async 函数中， async 中可以没有 await
• await 右侧的表达式一般为 Promise 对象
• await 返回的是 Promise 成功的值
• await 的 Promise 失败了，就会抛出异常
  • 需要通过 try...catch 捕获处理

// 创建Promise对象
const p = new Promise((resolve, reject) => {
  // resolve('用户数据');
  reject("失败啦!");
});

async function main() {
  try {
    let res = await p;
    console.log(res);
    // 用户数据
  } catch (e) {
    console.log(e);
    // 失败啦!
  }
}

// 调用函数
main();

（三）async 和 await 结合读取文件

// 引入fs模块
const fs = require("fs");

// 读取为学.md
function readWeiXue() {
  return new Promise((resolve, reject) => {
    fs.readFile("./resources/为学.md", (err, data) => {
      if (err) reject(err);
      resolve(data);
    });
  });
}

// 读取插秧诗.md
function readChaYangShi() {
  return new Promise((resolve, reject) => {
    fs.readFile("./resources/插秧诗.md", (err, data) => {
      if (err) reject(err);
      resolve(data);
    });
  });
}

// 读取观书有感.md
function readGuanShuYouGan() {
  return new Promise((resolve, reject) => {
    fs.readFile("./resources/观书有感.md", (err, data) => {
      if (err) reject(err);
      resolve(data);
    });
  });
}

// 声明一个async函数
async function main() {
  // 获取为学内容
  let weixue = await readWeiXue();
  // 获取插秧诗内容
  let chayangshi = await readChaYangShi();
  // 获取观书有感内容
  let guanshuyougan = await readGuanShuYouGan();

  console.log(weixue.toString());
  console.log(chayangshi.toString());
  console.log(guanshuyougan.toString());
}

main();

（四）async 和 await 结合发送 Ajax 请求

// 发送Ajax请求，返回的结果是Promise对象
function sendAjax(url) {
  return new Promise((resolve, reject) => {
    // 1.创建对象
    const x = new XMLHttpRequest();
    // 2.初始化
    x.open("GET", url);
    // 3.发送
    x.send();
    // 4.事件绑定
    x.onreadystatechange = function () {
      if (x.readyState === 4) {
        if (x.status >= 200 && x.status < 300) {
          resolve(x.response);
        } else {
          reject(x.status);
        }
      }
    };
  });
}

// Promise.then 方法测试
sendAjax("https://api.apiopen.top/getJoke").then(
  (value) => {
    console.log(value);
  },
  (reason) => {},
);

// async 与 await 测试
async function main() {
  let result = await sendAjax("https://api.apiopen.top/getJoke");
  console.log(result);
}

main();

（五）对象方法扩展

• Object.values() 返回一个给定对象的可枚举属性值的数组
• Object.entries() 返回一个给定对象自身可遍历属性 [key, value] 的数组
• Object.getOwnPropertyDescriptors() 返回指定对象所有自身属性的描述对象

// 声明对象
const yg = {
  name: "ikuko",
  cities: ["深圳", "北京", "上海"],
  skill: ["前端", "PHP"],
};

1.获取对象所有的键

console.log(Object.keys(yg));
// (3) ['name', 'cities', 'skill']

2.获取对象所有的值

console.log(Object.values(yg));
// (3) ['ikuko', Array(3), Array(2)]

3.entries

console.log(Object.entries(yg));
// (3) [Array(2), Array(2), Array(2)]
//     0: (2) ['name', 'ikuko']
//     1: (2) ['cities', Array(3)]
//     2: (2) ['skill', Array(2)]

// 以上结果可以创建Map
const m = new Map(Object.entries(yg));
console.log(m);
// Map(3) {'name' => 'ikuko', 'cities' => Array(3), 'skill' => Array(2)}

console.log(m.get("name"));
// ikuko

4.返回对象属性的描述对象

console.log(Object.getOwnPropertyDescriptors(yg));
// {name: {…}, cities: {…}, skill: {…}}
// name:
//     configurable: true
//     enumerable: true
//     value: "ikuko"
//     writable: true

// 获取的是create定义时设置的对象，可以进行深层次的克隆：
const obj = Object.create(null, {
  // 必须是一个对象
  name: {
    // 设置值
    value: "yg",
    // 属性特性
    writable: true,
    configurable: true,
    enumerable: true,
  },
});