async与await结合发送AJAX请求⼩案例
案例内容：
通过点击屏幕上的按钮来过去接⼝中的笑话，并进⾏打印！
完整代码如下：
<!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.open('GET', url);
xhr.send();
// 处理结果
await和async使用方法
adyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
sponse);
}else{
reject(xhr.status);
}
}
}
})
}
let btn = document.querySelector('#btn');
btn.addEventListener('click', async function(){
// 获取段⼦信息
console.log('TEST');
let duanzi = await sendAJAX('p/getJoke');
console.log(duanzi);
})
</script>
</body>
</html>
实例结果：
可以看到，使⽤async与await结合来发送请求，⾮常的简单⽅便！
1：在错误处理这⽅⾯，async和await结合⽅式，⽤try catch包裹就可以，⽐原来使⽤纯回调函数要⽅便的多！不需要⼀层层判断。2：在async和await的使⽤过程中，我们是看不到回调函数的！
3：在promise的then⽅法和catch⽅法中，可以看到有回调函数。
4：⾮常简洁，就类似于我们写同步函数调⽤的⽅式，只不过在前⾯多了个await，但是他的内部的执⾏确是异步的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。