同步：一件事没做完，只能等待完成之后才能去做另一件，代码按照顺序依次执行。
    异步：无论这件事情是否做完，可以在执行结束之后坐另一间事情，两件事情可以同时进行。

    获取异步数据，需要利用回调函数获取数据，想要控制获取数据的顺序，需要嵌套回调函数，当获取的数据量大的时候，会引发回调地狱的问题。此时需要解决回调地狱。

    执行顺序：同步程序执行结束后，执行异步程序。
    单线程：js是单线程的，只能等待一个任务结束之后才能执行另一个任务。

    常见的两种异步情况：

    1. ajax请求
    2. 计时器：setTimeout、setInterval

    异步问题：
    image.png

    演示异步：
    使用计时器函数等待2s，计时器结束后函数return '哈哈' 在计时器函数下面输出函数返回值，我们预期的结果是等待2s之后再输出哈哈，但是程序异步执行，并发执行，先执行下面的输出“返回语句”，然后等待2s之后才会执行计时器中定义的语句
    : return '哈哈'，想让异步程序执行顺序按照我们的规定的顺序执行时，需要处理异步问题。

    常见的处理异步问题方式：

    1. 使用回调函数（不推荐使用）
    2. 使用ES2015提供的Promise对象 ```javascript function getTea(fn) { setTimeout(() => { fn(‘奶茶’); }, 2000); }

    function hotPort(fn) { setTimeout(() => { fn(‘火锅’); }, 1000); }

    // 回调地狱 getTea((data) => { console.log(data); hotPort((data) => { console.log(data); }); });

    // 用回调函数解决异步问题不是一个好的方法，应该使用Promise对象

    2. 利用Promise处理异步问题：利用promise中的then可以获取异步数据。
    4. ```javascript
    5. let tea = new Promise((resolve, reject) => {      // promise是构造函数，new获取
    6.   setTimeout(() => {
    7.     // 将异步数据传递出来
    8.     let result = true;
    9.     if (result) {
    10.       resolve('奶茶');
    11.     } else {
    12.       reject('奶茶获取失败');
    13.     }
    14.   }, 2000);
    15. });
    17. let hotPort = new Promise((resolve, reject) => {
    18.   setTimeout(() => {
    19.     // 将异步数据传递出来
    20.     let result = true;
    21.     if (result) {
    22.       resolve('火锅');
    23.     } else {
    24.       reject('火锅获取失败');
    25.     }
    26.   }, 1000);
    27. });
    29. tea.then(data => {
    30.   console.log(data);
    31.   return hotPort;
    32. }).then(data => {
    33.   console.log(data);
    34. }).catch(error => {
    35.   console.log(error);
    36. });

    使用async、await解决异步问题：
    await后面加上Promise对象，让异步程序更像同步程序一样执行。

    1. let tea = new Promise((resolve, reject) => {
    2.   setTimeout(() => {
    3.     // 将异步数据传递出来
    4.     let result = true;
    5.     if (result) {
    6.       resolve('奶茶');
    7.     } else {
    8.       reject('奶茶获取失败');
    9.     }
    10.   }, 2000);
    11. });
    13. let hotPort = new Promise((resolve, reject) => {
    14.   setTimeout(() => {
    15.     // 将异步数据传递出来
    16.     let result = true;
    17.     if (result) {
    18.       resolve('火锅');
    19.     } else {
    20.       reject('火锅获取失败');
    21.     }
    22.   }, 1000);
    23. });
    25. async function fun() {
    26.   let TEA = await tea;
    27.   console.log(TEA);
    29.   let HOT_PORT = await hotPort;
    30.   console.log(HOT_PORT);
    31. }
    33. fun();

    总结：

    1. 解决异步程序：
      1. 回调函数解决异步编程（不推荐使用）
      2. Promise构造函数：
        1. resolve、reject函数，然后在then、catch方法的参数中接受到异步数据。
      3. async、await：
        1. 简化了promise
        2. async修饰函数、await放在Promise对象前面，能接受到Promise对象传入的数据。

    image.png