537 es8 async 和 await
async 和 await 两种语法结合可以让异步代码像同步代码一样
4.1.1.async 函数
- async 函数的返回值为 promise 对象，
- promise 对象的结果由 async 函数执行的返回值决定
4.1.2.await 表达式
- await 必须写在 async 函数中
await 右侧的表达式一般为 promise 对象await 返回的是 promise 成功的值- await 的 promise 失败了, 就会抛出异常, 需要通过
try...catch捕获处理
async函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>async函数</title>
</head>
<body>
<script>
// async 函数
async function fn() {
// 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
// return '哈哈'; // 返回一个字符串
// return;
// 抛出错误, 返回的结果是一个失败的 Promise
// throw new Error('出错啦!');
// 返回的结果是一个 Promise 对象
return new Promise((resolve, reject) => {
resolve('成功的数据');
// reject("失败的错误");
});
}
const result = fn();
// 调用 then 方法
result.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
})
</script>
</body>
</html>
await
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>await</title>
</head>
<body>
<script>
// 创建 promise 对象
const p = new Promise((resolve, reject) => {
// resolve("用户数据");
reject("失败啦!");
})
// await 要放在 async 函数中.
async function main() {
// 当promise执行的是reject，得把await放在try catch中，才能不会异常，否则报错
try {
let result = await p;
console.log(result);
} catch (e) {
console.log(e);
}
}
// 调用函数
main();
</script>
</body>
</html>
async和await结合读取文件
//1. 引入 fs 模块
const fs = require("fs");
// 其实，只需要封装成一个函数，给函数传递不同的路径即可
//读取『为学』
function readWeiXue() {
return new Promise((resolve, reject) => {
fs.readFile("./resources/为学.md", (err, data) => {
// 如果失败
if (err) reject(err);
// 如果成功
resolve(data);
})
})
}
function readChaYangShi() {
return new Promise((resolve, reject) => {
fs.readFile("./resources/插秧诗.md", (err, data) => {
// 如果失败
if (err) reject(err);
// 如果成功
resolve(data);
})
})
}
function readGuanShu() {
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 chayang = await readChaYangShi();
// 获取观书有感
let guanshu = await readGuanShu();
console.log(weixue.toString());
console.log(chayang.toString());
console.log(guanshu.toString());
}
main();
async与await封装AJAX请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送 AJAX 请求</title>
</head>
<body>
<script>
// 发送 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 测试 axios
async function main() {
// 发送 AJAX 请求
let result = await sendAJAX("https://api.apiopen.top/getJoke");
// 再次测试
let tianqi = await sendAJAX('https:// www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')
console.log(tianqi);
}
main();
</script>
</body>
</html>
