异步学习

异步处理

异步处理的方式有如下几种，早期的回调地狱模式，中期的Promise,优雅的async+await

1.回调地狱

模拟ajax 请求

function ajax(fn){
  setTimeout(()=>{
    console.log('你好');
    fn()
  },1000)
}
// 开启回调地狱模式。。。代码不优雅，抛出错误比较困难
ajax(()=>{
  console.log('执行结束');
  ajax(()=>{
    console.log('1执行结束');
    ajax(()=>{
      console.log('2执行结束');
    })
  })
})

// 控制台打印如下：
-----------间隔1s
你好
执行结束
-----------间隔1s
你好
1执行结束
-----------间隔1s
你好
2执行结束
复制代码

---

2.Promise

// 定义一个吃饭任务
function delay(word){
  return new Promise((reslove,reject)=>{
    setTimeout(()=>{
      reslove(word) //承诺做到 
    },2000)
  })
}
// 开启吃饭模式
delay('吃早餐')
.then((word)=>{
  console.log(word);
  return delay('吃中餐').then((word)=>{
    console.log(word);
    return delay('吃晚餐').then((word)=>{
      console.log(word);
    })
  })
})

// 控制台打印如下：
-----------间隔2s
吃早餐
-----------间隔2s
吃中餐
-----------间隔2s
吃晚餐
复制代码

---

3.async+await 优雅的异步处理

// 定义一个吃饭任务
function delay(word){
  return new Promise((reslove,reject)=>{
    setTimeout(()=>{
      reslove(word) //承诺做到 
    },2000)
  })
}
// 安排吃饭顺序
async function start(){
	const word3= await delay('吃晚餐')
  console.log(word3);
  const word1= await delay('吃早餐')
  console.log(word1);
  const word2= await delay('吃中餐')
  console.log(word2);
}
// 开启吃饭任务
start()

// 控制台打印如下：
-----------间隔2s
吃晚餐
-----------间隔2s
吃早餐
-----------间隔2s
吃中餐
复制代码