简单理解promise，async和await

1.promise是什么？

1、主要用于异步计算；
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果；
3、可以在对象之间传递和操作promise，帮助我们处理队列

异步操作的常见语法

DOM事件

document.getElementById('#start').addEventListener('click', start, false);
function start() {
  // 响应事件，进行相应的操作
}
$('#start').on('click', start)

Ajax请求

$.ajax('http://www.wyunfei.com/', {
 success (res) {
   // 这里可以监听res返回的数据做回调逻辑的处理
 }
})

// 或者在页面加载完毕后回调
$(function() {
 // 页面结构加载完成，做回调逻辑处理
})

计时器setTimeout，setInterval

vue里面 dom更新也是异步的：Vue提供了api叫$nextTick等dom更新以后再调用它的回调函数;

ps:曾经有个项目，elment-ui里添加标签，他底层是通过v-if控制input的显示隐藏，但是v-if底层是dom结构的销毁和重建，如果在点击标签添加按钮就让input显示自动获取焦点，直接操作DOM添加focus（）是不可行的，因为vue里DOM的更新是异步的，但是VUE给我们提供了一个API叫￥nextTick用于等dom更新以后再调用的回调函数。

要达到无阻塞高并发异步需求

异步回调的问题：

• 之前处理异步是通过纯粹的回调函数的形式进行处理；
• 很容易进入到回调地狱中，剥夺了函数return的能力；
• 稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护；
• 问题可以解决，但是难以读懂，维护困难

一般情况我们一次性调用API就可以完成请求。
有些情况需要多次调用服务器API，就会形成一个链式调用，比如为了完成一个功能，我们需要调用API1、API2、API3，依次按照顺序进行调用，这个时候就会出现回调地狱的问题。

基于Promise发送Ajax请求

<script type="text/javascript">
    function queryData(url) {
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 约定处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 约定处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    // 发送多个ajax请求并且保证顺序
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
    
  </script>

promise

• promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）；
• 并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据；
• 代码风格，容易理解，便于维护；
• 多个异步等待合并便于解决；

2.async和await

async关键字声明后面是一个异步函数，函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hc8nETyE-1603895405230)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1603878480905.png)]

await(看作是个运算符)操作符它只能在异步函数 async function内部使用，用于等待一个 Promise 对象,。如果它等到的是非promise对象，那么他直接返回对应的值；如果等到的是promise，那么他会临时阻塞后续代码，直到promise对象resolve，取到 resolve 的值，将其作为运算结果返回。

async/await的优势在于处理then链，单一的Promise链并不能发现async和await的优势，但是如果需要处理多个Promise组成的then链的时候，优势就体现出来了，Promise通过then链来解决多层回调的问题,现在又用async/await来进一步优化它（Promsie参数传递太麻烦）。

假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。用 setTimeout 来模拟异步操作：

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 200，这个值将用于下一步骤
 */
function takeLongTime(n) {
    var p = new Promise(resolve => {
        setTimeout(fn(){
            resolve(n + 200)；
    	}, n);
    });
    return p；
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

现在用 Promise 方式来实现这三个步骤的处理:

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1512.39404296875 ms

如果用 async/await来实现会是这样

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1512.549072265625 ms

结果和之前的 Promise 实现是一样的，但是这个代码看起来是不是清晰得多，几乎跟同步代码一样。