async/await使用说明
- async使用在函数定义的部分, 被async修改的函数会变成一个异步(promise)函数
async function fn(){
return '这是函数的返回值';
}
// 此处无法直接接收到demo函数的返回值;
var res=fn();
// 打印结果: Promise { '这是函数的返回值' }
console.log(res);
// 正确的姿势
fn().then((res)=>{
// 打印结果: 这是函数的返回值
console.log(res)
});
// 被async关键字修饰的函数fn会被转换成类似下面的代码结构
function fn(){
return new Promise(function(resolve,reject){
var res='这是函数的返回值';
resolve(res);
})
}
- await关键字后面必须是一个promise对象(一般是在一个函数中返回一个promise对象)
- 一般而言async和await是配合使用的
async修饰不同的函数
修饰普通函数
async function demo(){}
修饰函数表达式
var demo=async function(){
}
修饰箭头函数
var demo=async ()=>{
}
演示实际应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<button id="btn1">传统方式请求数据</button>
<button id="btn2">async&await请求数据</button>
</div>
<script>
window.addEventListener('load', function () {
// 普通方式处理promise
document.querySelector('#btn1').onclick = function(){
// 正常的promise调用方式
getData().then((res) => {
console.log('传统方式的promise处理方法:', res);
});
};
// 使用async&await
document.querySelector('#btn2').onclick = async function clickHandle() {
// 调用getData方法请求数据; 需要使用await关键字调用返回值为promise方法
var res = await getData();
console.log('使用async&await调用promise:', res);
};
});
// 请求数据
function getData() {
return new Promise(function (resolve, reject) {
// 实际开发中应该在此处发送ajax请求数据
const data = {
name: 'zs',
age: 30
}
resolve(data);
});
}
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
