异步编程

什么是同步与异步：
同步：一件事没做完，只能等待，完成之后再去做另一件事
异步： 两件事可以同时进行

前端开发中最常见的两种异步情况：

1. ajax: 向后台请求数据
2. 计时器： setInterval setTimeout

比如：我想喝奶茶和吃火锅，两者都点了外卖，两个外卖制作互不影响，但是我想先喝奶茶，再吃火锅，这个顺序不能乱 但是奶茶店比较忙，火锅先到了，这个逻辑没有按照我的预期执行，这个时候就出现bug，应该如何处理？

如何获取到异步数据？

回调函数：将函数作为参数传递给另一个函数

如何摆脱回调地狱

Promise

let tea = new Promise((resolve, reject)=> {
  setTimeout(() => {
    let flag = true;
    if(flag) {
      resolve("奶茶")
    }else {
      reject("获取奶茶失败")
    }
  }, 2000)
})

let hotpot = new Promise((resolve, reject)=> {
  setTimeout(() => {
    let flag = true;
    if(flag) {
      resolve("火锅")
    }else {
      reject("获取火锅失败")
    }
  }, 2000)
})


tea.then((data) => {
  console.log(data)
  return hotpot;
}).then((data) => {
  console.log(data)
}).catch(err => {
  console.log('err', err)
})

如何让异步程序更容易维护？

async函数(await)

let tea = new Promise((resolve, reject)=> {
  setTimeout(() => {
    let flag = true;
    if(flag) {
      resolve("奶茶")
    }else {
      reject("获取奶茶失败")
    }
  }, 2000)
})

let hotpot = new Promise((resolve, reject)=> {
  setTimeout(() => {
    let flag = true;
    if(flag) {
      resolve("火锅")
    }else {
      reject("获取火锅失败")
    }
  }, 2000)
})

async function fun() {
  let dataTea = await tea
  console.log(dataTea)
  let dataHotPot = await hotpot
  console.log(dataHotPot)
}
fun()

封装ajax

axios获取异步数据：
在实际项目开发的过程中，我们通常是使用第三方ajax库来实现数据交互的，例如jQuery的ajax方法，或者是axios。

封装ajax

我们使用XMLHttpRequest对象，封装一个自定义的axios方法

0： 请求未初始化，还没有调用open()
1： 请求已经建立，但是还没有发送，还没有调用send()
2: 请求已发送，正在处理中（通常现在可以从响应中获取内容头）
3： 请求在处理中，通常响应中已有部分数据可用了，没有全局完成
4： 响应已完成，可以获取并使用服务器的响应了。

   let xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function () {
      console.log(xhr.readyState, "状态变化")
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log(xhr.responseText, '数据')
        } else {
          console.log("获取数据失败")
        }
      }
    }
    xhr.open("get", "/data/tea.txt")

    xhr.send()

 function axios(method, url) {
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function () {
          // console.log(xhr.readyState, "状态变化")
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              resolve(xhr.responseText, '数据')
            } else {
              reject("获取数据失败")
            }
          }
        }
        // xhr.open("get", "/data/tea.txt")
        xhr.open(method, url)

        xhr.send()
      })
    }

    // axios("get", "/data/tea.txt").then((res) => {
    //   console.log(res)
    //   return axios("get", "/data/hotPot.txt")
    // }).then(res => {
    //   console.log(res)
    // })

    async function getData() {
      let tea = await axios("get", "/data/tea.txt")
      console.log(tea)
      let hotPot = await axios("get", "/data/hotPot.txt")
      console.log(hotPot)
    }

    getData()