同步与异步
同步:做完一件事才能做下一件事
异步:可同时做好几件事,且互不影响
一般程序都是从上往下的同步运行
程序按顺序执行
setTimeout就是个常用的异步方法
程序不按顺序执行,且互不干扰,2是50秒后发送,假设2的代码出现问题,也不会影响其他的数字正常打印
异步的问题
异步获取数据
<script>
let target = "hello";//数据
function getData(){//获取数据的方法
setTimeout(() => {//模拟异步
return target;//return只能返回同步的数据
},500);
}
let result = getData();
console.log(result);//undefined
/*因为getData函数的return一瞬间就会返回,得到undefined*/
</script>
方法1:回调函数
//回调函数:将函数作为参数传给另一个函数
let target = "hello";
function getData(fn){//fn函数作为实参
setTimeout(() => {
fn(target);//target是fn的实参,返回target作为实参的fn函数的值
},500);
}
getData((x) => {
console.log(x);//hello
});
/*将没有名字的函数(假设为y)作为回调函数,y又作为getData的参数
把y作为参数传给fn,x是y的形参,y的函数返回的是形参x的值
x对应的是fn的参数target*/
方法2:Promise对象
Promise对象是专门处理异步的
let target = "hello";
function getData(){
return new Promise((resolve) => {//返回一个Promise对象
setTimeout(() => {
resolve(target);
},500);
})
}
let p = getData();
p.then((data) => {
console.log(data);//hello
});
更多的是用人家封装好的库函数如getData,直接调用then方法
方法3:async函数
let target = "hello";
function getData(){
return new Promise((resolve) => {//返回一个Promise对象
setTimeout(() => {
resolve(target);
},500);
})
}
async function fun(){
let data = await getData();//await后面跟上Promise对象
console.log(data);//hello
}
fun();
await会等待Promise对象获取到结果之后才会继续执行下一个代码
而普通的function不能实现等待的效果,async具体到ajax再细说