Promise--async与await结合案例
Posted Z && Y
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise--async与await结合案例相关的知识，希望对你有一定的参考价值。
1. async与await结合案例 01
读取resource目录下面 1.html 2.html 3.html 的文件内容，并且把他们拼接在一起打印出来。
1.1 准备工作：
1.html
观书有感
-朱熹
半亩方塘一鉴开
天光云影共徘徊。
2.html
问渠那得清如许？
为有源头活水来。
3.html
---------
中华古诗词
1.2 回调函数实现：
//回调函数的方式
const fs = require('fs');
fs.readFile('./resource/1.html', (err, data1) => {
if (err) throw err;
fs.readFile('./resource/2.html', (err, data2) => {
if (err) throw err;
fs.readFile('./resource/3.html', (err, data3) => {
if (err) throw err;
console.log(data1 + data2 + data3);
});
});
});
1.3 async与await结合实现：
const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);
//async 与 await
async function showInfo() {
try {
//读取第一个文件的内容
let data1 = await mineReadFile('./resource/1.html');
let data2 = await mineReadFile('./resource/2.html');
let data3 = await mineReadFile('./resource/3.html');
console.log(data1 + data2 + data3);
} catch (e) {
console.log(e.code);
}
}
showInfo();
2. async与await结合案例 02
需求：
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>async与await结合发送AJAX</title>
</head>
<body>
<button id="btn">点击获取信息</button>
<script>
//axios
function sendAJAX(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("GET", url);
xhr.send();
//处理结果
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
//判断成功
if (xhr.status >= 200 && xhr.status < 300) {
//成功的结果
resolve(xhr.response);
} else {
reject(xhr.status);
}
}
}
});
}
//段子接口地址 https://api.apiopen.top/getJoke
let btn = document.querySelector('#btn');
btn.addEventListener('click', async function () {
//获取段子信息
let info = await sendAJAX('https://api.apiopen.top/getJoke');
console.log(info);
});
</script>
</body>
</html>
以上是关于Promise--async与await结合案例的主要内容，如果未能解决你的问题，请参考以下文章
js异步回调Async/Await与Promise区别 新学习使用Async/Await