ES8
async await
为了解决异步编程,async await 结合使用是异步代码和同步代码一样
- 生成器函数
- Promise函数
- async await
async函数
async 函数的返回值为 Promise对象(即使返回的是字符串)只要返回的不是一个Promise对象,结果都为成功的Promise对象,返回的是Promise对象,结果为Promise对象返回的结果(成功或失败)。
Promise对象的结果由 async 函数执行的返回值决定
1.return的不是一个Promise对象(任意字符、空、数值等),async 函数结果为成功的Promise对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
const fn = async () => {
return 'wf';
};
console.log(fn());
</script>
</body>
</html>
2.抛出错误,sync 函数返回的是一个失败的Promise对象
const fn = async () => {
// return 'wf';
throw new Error('error');
};
console.log(fn());
3.return的是一个Promise对象,则根据这个Promise对象的执行结果决定(resolve,reject)
const fn = async () => {
// return 'wf';
// throw new Error('error');
return new Promise((resolve, reject) => resolve('success'));
};
console.log(fn());
根据返回的结果,可以进行then、catch操作
const fn = async () => {
// return 'wf';
// throw new Error('error');
return new Promise((resolve, reject) => resolve('success'));
};
// console.log(fn());
const result = fn();
result.then(value => console.log(value)).catch(err => console.warn(err)); // success
await表达式
- await 必须写在 async函数中(单向的,async可以不需要await)
- await 右侧的表达式一般为 Promise对象
- await 返回的是 Promise对象成功的值
- await 的 Promise对象失败了,就会抛出异常,需要通过try…catch 捕获处理
1.await 返回的是 Promise对象成功的值时
const p = new Promise((resolve, reject) => resolve('success'));
const fn = async () => {
const result = await p;
console.log(result);
};
fn(); // success
2.await 返回的是 Promise对象失败的值时
const p = new Promise((resolve, reject) => reject('gg'));
const fn = async () => {
const result = await p;
console.log(result);
};
fn(); // success
使用try…catch 捕获异常
const p = new Promise((resolve, reject) => reject('gg'));
const fn = async () => {
try {
const result = await p;
console.log(result);
} catch (error) {
console.log(error);
}
};
fn(); // gg
结合使用
读取文件
基于node环境 fs模块读取文件
const fs = require('fs');
const rf = path => {
return new Promise((resolve, reject) => {
fs.readFile(path, (err, data) => {
if (err) reject(err);
resolve(data.toString());
});
});
};
const fn = async () => {
const result1 = await rf('./1.txt');
const result2 = await rf('./2.txt');
const result3 = await rf('./3.txt');
console.log(result1 + '...' + result2 + '...' + result3);
};
fn();
发送ajax
const ajaxData = url => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject(xhr.status);
}
}
};
});
};
// ajaxData('http://ip-api.com/json/58.23.7.26?lang=zh-CN')
// .then(data => console.log(data))
// .catch(err => console.log(err));
const fn = async () => {
const res = await ajaxData('http://ip-api.com/json/58.23.7.26?lang=zh-CN');
console.log(res);
};
fn();
对象扩展方法
Object.values 返回对象的值
Object.keys 返回对象的键
const obj = {
name: 'wf',
code: ['c', 'c++', 'c#', 'java', 'js', 'ts'],
pwd: [1, 2, 3, 4, 5, 6, 7, 8]
};
console.log(Object.keys(obj));
console.log(Object.values(obj));
Object.entries 将键和值变为数组
console.log(Object.entries(obj));
方便创建一个Map
const m = new Map(Object.entries(obj));
console.log(m);
Object.getOwnPropertyDescriptor 对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(obj));
getOwnPropertyDescriptors得到的是对象创建时定义的属性
const Obj = Object.create(null, {
name: {
value: 'wf',
writable: true, // 是否可以写
configurable: true, // 是否可以删除
enumerable: true // 是否可以枚举
}
});
得到这些属性,可以对对象进行深层次的克隆。