异步函数拿多个不同时间打印的数据，不能用return，得用回调函数。若需要控制顺序，则应该主执行函数嵌套，但嵌套多了，代码就不方便维护。这就是回调地狱。

    es5用回调函数拿异步数据。
    es6用then拿，最终用async

    Promise对象用于异步按想要的顺序打印多个不同时间的数据，配合async和 await 可以用同步的方式写异步获取数据。

    1. //promise对象  最经典的方法，记住!
    2. //resolve可以将异步数据传递出来
    3. let p = new Promise(function(resolve){
    4.   resolve("hello world")
    5. });
    7. //通过then拿到异步数据 es6
    8. p.then(function(data){
    9.   console.log(data); //data就是resolve传出来的数据(hello world)
    10. })；
    11. //resolve传出来的值，是then里面的形参
    12. 以上是es6老方法
    14. ----------------------------------------------------------------------------------
    16. 以下是es6 async新方法  
    17. 比异步函数写法好一些，避免回调地狱，但异步一多会有一堆then
    18. function getTea(){
    19.   return new Promise(funciton(resolve){
    20.     setTimeout(()=>{
    21.       resolve("奶茶")；
    22.     },1000)
    23.   })
    24. };
    25. function getHotpot(){
    26.   return new Promise(function(resolve){
    27.     setTimeout(()=>{
    28.       resolve("火锅")；
    29.     }，2000)
    30.   })
    31. }
    33. //先吃火锅，再喝奶茶
    34. //Promise写法的链式获取异步操作
    35. getHotpot().then(function(data){
    36.   console.log(data);
    37.   return getTea();
    38. }).then(function(data){
    39.     console.log(data);
    40. })
    41. //两秒输出火锅，再一秒输出奶茶
    43. -------------------------------------------------------------------------------
    44. //async函数，解决异步数据问题的终极方法
    45. function getTea(){
    46.   return new Promise(funciton(resolve){
    47.     setTimeout(()=>{
    48.       resolve("奶茶")；
    49.     },1000)
    50.   })
    51. };
    52. function getHotpot(){
    53.   return new Promise(function(resolve){
    54.     setTimeout(()=>{
    55.       resolve("火锅")；
    56.     }，2000)
    57.   })
    58. }  
    59. //以上同上
    61. //async函数，解决异步数据问题的终极方法
    62. async function getData(){
    63.   //await后面跟Promise对象 加await可以直接获取resolve传递出来的异步数据，不用then了
    64.   let hotpot = await getHotpot();// getHotpot()是一个promise对象
    65.   console.log(hotPot);
    66.   let tea = await getTea();
    67.   console.log(tea);
    68.   //看着像同步执行了
    69. }
    70. getData(); //输出 火锅 奶茶

    image.png

    async函数的返回值是promise对象

    1. async function fun(){
    2.   return 1;
    3. };
    4. let a = fun();
    5. console.log(a);
    6. 打印Promise {1}
    8. --------------------------------------------------------------------
    9. //async其实就是Promise对象的简写
    10. async function fun(){
    11.   return 1;
    12. };
    14. //以上换成Promise写法，二者一模一样
    15. function fun(){
    16.   return new Promise((resolve) => {
    17.     resolve(1);
    18.   })
    19. }；
    21. fun().then((data)=>{
    22.   console.log(data);
    23. })
    25.   -----------------------------------------------------------------
    27.   //async await写法
    28.   //p1是Promise对象
    29.   let p1 = new Promise((resolve) => {
    30.     resolve(1)
    31.   })
    33. //p2是Promise对象
    34. let p2 = new Promise((resolve) => {
    35.   resolve(2)
    36. })
    38. async function fun(){
    39.   let a = await p1;
    40.   let b = await p2;
    41.   console.log(a);
    42.   console.log(b);
    43. }
    45. fun();
    47. -------------------------------------------------------------------

    题目1：
    image.png执行结果 200 100 不明白注释

    题目2：
    image.png打印 1 3 5 8 2 6 7 4

    总结： js执行顺序

    1. 同步
    2. process.nestTick
    3. 事件循环里的微任务（promise.then）
    4. 宏任务（计时器，ajax，读取文件）
    5. setImmediate