先来看这样一个异步问题
function getData(){
//定时器模拟异步
setTimeout(()=>{
let res = "nihao"
},100)
console.log(res);
}
getData() //无结果
无法打印res的结果,因为打印语句比定时器内的内容要先执行
那要如何处理这样的异步任务呢?怎样能够得到异步任务执行完的结果再继续接下来的工作呢?
一、callback回调函数
回调函数是一种特殊的函数,它作为参数传递给另一个函数,并在被调用函数执行完毕后被调用
把 需要得到异步任务结果之后才能执行 的内容放进回调函数中,异步任务完成后 调用作为函数参数的callback
//callback
function getData(callback){
//定时器模拟异步
setTimeout(()=>{
callback("nihao")
},100)
}
getData((res)=>{
console.log(res) //nihao
})
二、Promise
1.Promise 三种状态:pending — resolve|reject
function getPromise(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("成功")
},100)
})
}
getPromise()
//成功
.then(
(res)=>{console.log("成功啦",res)} )
//失败
.catch(
(err)=>{console.log("error!",err)} )
2.Promise.all()
需要等待多个Promise的结果怎么办呢?
function getPromise1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("1")
},100)
})
}
function getPromise2(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("2")
},100)
})
}
function getPromise3(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("3")
},100)
})
}
Promise.all([getPromise1(),getPromise2(),getPromise3()])
.then(
(res)=>{console.log("成功",res)} )
.catch(
(error)=>{console.log("失败",error)})
三、async await
async可以单独使用,返回的是Promise对象
await不能独自使用,必须配合async使用,否则会报错
function getPromise(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("成功")
},100)
})
}
async function get(){
let result = await getPromise();
console.log(result);
}
get() //成功