js中的async await 入门解惑篇

背景

很多人在js异步执行的时候被回调地狱折磨的和痛苦，虽然知道promise或async/await可以实现同步执行和链式结构，但是不元好好沉下心来学习原理和逻辑。这里做一个简单对比，帮助小白理解。

对比

假设我们有个work1想要在request1执行完成后打印“work期望在request完成后执行”，只需要简单改造即可

request1(){
    axios.post('url****').then(function(r){
      console.log('获取数据完成')
    });
  },
  work1(){
    this.request1()
    console.log('work期望在request完成后执行')
  },

改造后

request2(){
    return new Promise(resolve => {
      axios.post('/if/getList?t=banner').then(function(r){
        console.log('获取数据完成')
        resolve('resolved');
      });
    })
  },
  async work2(){
    await this.request2()
    console.log('work2期望在request完成后执行')
  },

其实改造只有2步，

1.将request改造为promise；

改造方法也是2步，
一步是用return new Promise(resolve => {}）包裹，
第二步是任务完成后用resolve结束，将进程从pending改为resolve（由于是小白解惑篇，这里不讨论reject和fullfilled,感兴趣的自己去学习）

2.将work改造为async/await；

改造方法也是两步
一步是在方法定义前加上async
第二步在调用request处前面加await