promise

• 承诺(未来的事情)三个状态 pending fulfilled rejected状态一旦变化,就凝固了 =>
• 用于解决回调地狱的
• 创建promise 使用promise

const p = new Promise((resolve,reject))=>{
resolve(res) 成功时调用该函数 pending -> fulfilled
reject(err)  失败时调用该函数  pending -> rejected})

p.then((res)=>{
成功的回调函数
}).catch((err)=>{
失败的回调函数
})

• 假设一个需求:两秒后打印一个yy =>封装成一个函数(具体做什么事 不写死)

传统写法:

function fn (callback) {
setTimeout(()=>{
//具体做啥 不能写死, 传啥做啥 => 回调函数 
callback()
},2000);
}

• 调用fn 2秒 后打印yy

fn (function(){
console.log('yy');
})

• 调用fn 2秒后打印yy 打印完yy之后2秒打印ww

fn (function(){
console.log('yy');
fn (function(){
console.log('ww');
});
})

• 回调函数 => 层层嵌套 => 回调地狱 =>导致代码难以维护 难以阅读
• 创建Promise:

function fn(){
return new Promise((resolve,reject)=>
//封装异步操作 ...  延时器
   setTimeout(()=>{
     resolve()
   },2000);
})
}

• 封装完成后需要2秒打印完之后再2秒执行打印只需使用异步操作时只需在上一个函数里return fn()在函数外面.then(()=>{console.log('ww') })
• 使用Promise:

fn().then(()=>{
console.log('yy');
//相当于又等了2s
return fn()
}).then(()=>{
console.log('ww')
return fn()
}).then(()=>{
console.log('zz')
}) 

• 效果:2秒后打印了yy再2秒后打印了ww再2秒后打印了zz,使用Pronise之后代码会更加简介易阅读
• 扩展写法async await 可以更快捷的解决回调地狱

async function test(){
  await fn()
  console.log('yy');
  await fn()
  console.log('ww');
  await fn()
  console.log('zz')
}
test()

异步问题

• 核心:等一个异步操作结束以后 做某件事
• 回调函数=>回调地狱
• Promise封装=> 得到 promise .then() .catch()
• /async await 语法糖 可以更加便捷