目录
一、ES8功能概述
二、async和await、对象方法扩展
1、概述
2、async 函数
概述：
代码实现：
3、await 表达式
概述：
代码实现：
4、async和await读取文件案例
代码实现：
运行结果：
5、async 和 await 结合发送ajax请求
代码实现：
运行结果：
6、对象方法扩展
Object.values、Object.entries和Object.getOwnPropertyDescriptors：
代码实现：
运行结果：
一、ES8功能概述
1、async 和 await
- 简化异步函数的写法；
2、对象方法扩展
- 对象方法扩展；
二、async和await、对象方法扩展
1、概述
async 和 await 两种语法结合可以让异步代码看起来像同步代码一样；
简化异步函数的写法；
2、async 函数
概述：
- async 函数的返回值为 promise 对象；
- promise 对象的结果由 async 函数执行的返回值决定；
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>async函数</title>
</head>
<body>
<script>
// async函数：异步函数
async function fn(){
// return 123; // 返回普通数据
// 若报错，则返回的Promise对象也是错误的
// throw new Error("出错啦！");
// 若返回的是Promise对象，那么返回的结果就是Promise对象的结果
return new Promise((resolve,reject)=>{
// resolve("成功啦！");
reject("失败啦！");
})
}
const result = fn();
// console.log(result); // 返回的结果是一个Promise对象
// 调用then方法
result.then(value => {
console.log(value);
},reason => {
console.warn(reason);
});
</script>
</body>
</html>
3、await 表达式
概述：
- await 必须写在 async 函数中；
- await 右侧的表达式一般为 promise 对象；
- await 返回的是 promise 成功的值；
- await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理；
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>await表达式</title>
</head>
<body>
<script>
// async函数 + await表达式：异步函数
// 创建Prmise对象
const p = new Promise((resolve,reject)=>{
resolve("成功啦！");
})
async function fn(){
// await 返回的是 promise 成功的值
let result = await p;
console.log(result); // 成功啦！
}
fn();
</script>
</body>
</html>
4、async和await读取文件案例
代码实现：
// 导入模块
const fs = require("fs");
// 读取
function readText() {
return new Promise((resolve, reject) => {
fs.readFile("../resources/text.txt", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
function readTest1() {
return new Promise((resolve, reject) => {
fs.readFile("../resources/test1.txt", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
function readTest2() {
return new Promise((resolve, reject) => {
fs.readFile("../resources/test2.txt", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
//声明一个 async 函数
async function main(){
//获取为学内容
let t0 = await readText();
//获取插秧诗内容
let t1 = await readTest1();
// 获取观书有感
let t2 = await readTest2();
console.log(t0.toString());
console.log(t1.toString());
console.log(t2.toString());
}
main();
运行结果：
5、async 和 await 结合发送ajax请求
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>async 和 await 结合发送ajax请求</title>
</head>
<body>
<script>
// async 和 await 结合发送ajax请求
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<=299){
// 成功
resolve(x.response);
}else{
// 失败
reject(x.status);
}
}
}
});
}
// 测试
// const result = sendAjax("https://api.apiopen.top/getJoke");
// result.then(value=>{
// console.log(value);
// },reason=>{
// console.warn(reason);
// })
// 使用async和await
async function main(){
let result = await sendAjax("https://api.apiopen.top/getJoke");
console.log(result);
}
main();
</script>
</body>
</html>
运行结果：
6、对象方法扩展
Object.values、Object.entries和Object.getOwnPropertyDescriptors：
- Object.values()方法：返回一个给定对象的所有可枚举属性值的数组；
- Object.entries()方法：返回一个给定对象自身可遍历属性 [key,value] 的数组；
- Object.getOwnPropertyDescriptors()该方法：返回指定对象所有自身属性的描述对象；
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象方法扩展</title>
</head>
<body>
<script>
// 对象方法扩展
let school = {
name : "訾博",
age : 24,
sex : "男"
}
// 获取对象所有的键
console.log(Object.keys(school));
// 获取对象所有的值
console.log(Object.values(school));
// 获取对象的entries
console.log(Object.entries(school));
// 创建map
const map = new Map(Object.entries(school));
console.log(map);
console.log(map.get("name"));
// 返回指定对象所有自身属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));
// 参考内容：
const obj = Object.create(null,{
name : {
// 设置值
value : "訾博",
// 属性特性
writable : true,
configuration : true,
enumerable : true
}
});
</script>
</body>
</html>
运行结果：
