为熟悉async与await的使用，本文通过小案例来进行AJAX的发送！具体原理见如下博文！
async函数与await函数基本原理介绍 https://blog.csdn.net/czj1049561601/article/details/114238733
案例内容：
通过点击屏幕上的按钮来过去接口中的笑话，并进行打印！
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击获取段子</button>
<script>
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);
}
}
}
})
}
let btn = document.querySelector('#btn');
btn.addEventListener('click', async function () {
// 获取段子信息
console.log('TEST');
let duanzi = await sendAJAX('https://api.apiopen.top/getJoke');
console.log(duanzi);
})
</script>
</body>
</html>
实例结果：
可以看到，使用async与await结合来发送请求，非常的简单方便！
1：在错误处理这方面，async和await结合方式，用try catch包裹就可以，比原来使用纯回调函数要方便的多！不需要一层层判断。
2：在async和await的使用过程中，我们是看不到回调函数的！
3：在promise的then方法和catch方法中，可以看到有回调函数。
4：非常简洁，就类似于我们写同步函数调用的方式，只不过在前面多了个await，但是他的内部的执行确是异步的。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
