AJAX进阶-day4 - 技术栈

同步代码和异步代码

回调函数地狱

[Promise - 链式调用](#Promise - 链式调用)

async函数和await

async函数和await_捕获错误

事件循环-EventLoop

宏任务与微任务

[Promise.all 静态方法](#Promise.all 静态方法)

同步代码和异步代码

同步代码：逐行执行，需原地等待结果后，才继续向下执行
异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数

什么是同步代码？
➢ 逐行执行，原地等待结果后，才继续向下执行

什么是异步代码？
➢ 调用后耗时，不阻塞代码执行，将来完成后触发回调函数

JS 中有哪些异步代码？
➢ setTimeout / setInterval
➢ 事件
➢ AJAX

异步代码如何接收结果？
➢ 依靠回调函数来接收

回调函数地狱

概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全身

Promise - 链式调用

概念：依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束
细节：then() 回调函数中的返回值，会影响新生成的 Promise 对象最终状态和结果
好处：通过链式调用，解决回调函数嵌套问题

复制代码

    let pname = ''
    axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => {
      pname = result.data.list[0]
      document.querySelector('.province').innerHTML = pname
      return axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
    }).then(result => {
      const cname = result.data.list[0]
      document.querySelector('.city').innerHTML = cname
      return axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
    }).then(result => {
      const area = (result.data.list[0])
      document.querySelector('.area').innerHTML = area
    })

async函数和await

概念：在 async 函数内，使用 await 关键字取代 then 函数，等待获取 Promise 对象成功状态的结果值

注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）

复制代码

 async function getData() {
      const pObj = await axios({ url: 'http://hmajax.itheima.net/api/province' })
      const pname = pObj.data.list[0]


      const cObj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
      const cname = cObj.data.list[0]


      const areaObj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
      const area = areaObj.data.list[0]


      document.querySelector('.province').innerHTML = pname
      document.querySelector('.city').innerHTML = cname
      document.querySelector('.area').innerHTML = area


    }
    getData()

async函数和await_捕获错误

try包裹可能产生错误的代码

如果try里某行代码报错后，try中剩余的代码不会执行了

事件循环-EventLoop

原因：JavaScript 单线程（某一刻只能执行一行代码），为了让耗时代码不阻塞其他代码运行，设计了事件循环模型

定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环

什么是事件循环？
➢ 执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制

为什么有事件循环？
➢ JavaScript 是单线程的，为了不阻塞 JS 引擎，设计执行代码的模型

JavaScript 内代码如何执行？
➢ 执行同步代码，遇到异步代码交给宿主浏览器环境执行
➢ 异步有了结果后，把回调函数放入任务队列排队
➢ 当调用栈空闲后，反复调用任务队列里的回调函数

宏任务与微任务

ES6 之后引入了 Promise 对象，让 JS 引擎也可以发起异步任务
异步任务分为：
✓ 宏任务：由浏览器环境执行的异步代码
✓ 微任务：由 JS 引擎环境执行的异步代码

JavaScript 内代码如何执行？
➢ 执行第一个 script 脚本事件宏任务，里面同步代码
➢ 遇到宏任务/微任务交给宿主环境，有结果回调函数进入对应队列
➢ 当执行栈空闲时，清空微任务队列，再执行下一个宏任务，从1再来
自己理解：当执行栈空闲时，优先执行微任务队列，因为微任务是由 JS 引擎环境执行的异步代码

Promise.all 静态方法

概念：合并多个 Promise 对象，等待所有同时成功完成（或某一个失败），做后续逻辑

语法：

复制代码

    const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })
    const szPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440300' } })

    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    // console.log(p);
    p.then(result => {
      console.log(result);
      const htmlStr = result.map(item => {
        return `
        <li>${item.data.data.area}----${item.data.data.weather}</li>
        `
      }).join('')

      document.querySelector('ul').innerHTML = htmlStr


    }).catch(error => {
      console.dir(error)
    })