AJAX 进阶 day4

<script>
    /**
     * 目标：把回调函数嵌套代码，改成Promise链式调用结构
     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
    */
    let pname = ''

    axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => {
      // 获取第一个省份
      // console.log(result.data.list[0])
      const province = document.querySelector('.province')
      pname = result.data.list[0]
      province.innerHTML = result.data.list[0]
      // 返回城市的对象
      return axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
    }).then(result => {
      // console.log(result.data.list[0])
      // 获取第一个城市
      const city = document.querySelector('.city')
      const cname = result.data.list[0]
      city.innerHTML = result.data.list[0]
      // 返回地区信息
      return axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
    }).then(result => {
      // 获取第一个地区
      const area = document.querySelector('.area')
      area.innerHTML = result.data.list[0]
    })
  </script>

小结：

1. 什么是 Promise 的链式调用？

➢ 使用 then 方法返回新 Promise 对象特性，一直串联下去

2. then 回调函数中，return 的值会传给哪里？

➢ 传给 then 方法生成的新 Promise 对象

3. Promise 链式调用有什么用？

➢ 解决回调函数嵌套问题

3.async 和 await 使用

3.1 async函数和await

目标：掌握async和await语法，解决回调函数地狱

定义：

async 函数是 JavaScript 的一种特殊函数，它可以在函数中使用 await 关键字。当你将一个普通函数用 async 关键字修饰后，这个函数默认返回一个 Promise 对象。普通的返回值会被封装成一个 fulfilled 状态的 Promise 对象，而抛出的任何异常都会被封装成 rejected 状态的 Promise 对象。

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

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

代码：

<script>
    /**
     * 目标：掌握async和await语法，解决回调函数地狱
     * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
     * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
    */

    async function getData() {
      const p = await axios({ url: 'http://hmajax.itheima.net/api/province' })
      const pname = p.data.list[0]
      // console.log(p.data.list[0])
      const c = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
      const cname = c.data.list[0]
      // console.log(c.data.list[0])
      const a = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
      const aname = a.data.list[0]
      console.log(a)

      // 写入html文档
      document.querySelector('.province').innerHTML = pname
      document.querySelector('.city').innerHTML = cname
      document.querySelector('.area').innerHTML = aname

    }

    getData()
  </script>

3.2 async函数和await_捕获错误

语法：

代码：

<script>
    /**
     * 目标：掌握async和await语法，解决回调函数地狱
     * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
     * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
    */

    async function getData() {
      try {
        const p = await axios({ url: 'http://hmajax.itheima.net/api/province' })
        const pname = p.data.list[0]
        // console.log(p.data.list[0])
        const c = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
        const cname = c.data.list[0]
        // console.log(c.data.list[0])
        const a = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
        const aname = a.data.list[0]
        console.log(a)

        // 写入html文档
        document.querySelector('.province').innerHTML = pname
        document.querySelector('.city').innerHTML = cname
        document.querySelector('.area').innerHTML = aname

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

    getData()
  </script>

捕捉到异常之后，异常后面的代码将不再执行。

4.事件循环-EventLoop

4.1 事件循环

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

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

原理：

调用栈（Call Stack）：
- 调用栈是执行代码的地方。它记录了当前正在执行的函数和函数调用的历史。当一个函数被调用时，它会被压入调用栈中，执行完成后，它会被从栈中弹出。
任务队列（Task Queue 或 Callback Queue）：
- 任务队列用于存放异步任务的回调函数。例如，当 setTimeout 函数的定时器结束时，它的回调函数会被放到任务队列中。
微任务队列（Microtask Queue）：
- 微任务队列存放的是微任务（例如 Promise 的回调函数）。微任务通常比宏任务（如定时器回调）优先级更高。微任务队列的任务会在事件循环的每一轮结束之前执行完毕。

4.2 宏任务与微任务- 执行顺序

异步任务分为：

✓ 宏任务：由浏览器环境执行的异步代码
✓ 微任务：由 JS 引擎环境执行的异步代码

执行顺序：

使用图解-分析代码执行顺序

简单理解：同步就是会被立即执行的代码，而异步会被分配到相应的任务队列进行等待，

当栈处于空闲状态就会先清空微任务队列，再执行宏任务队列。

4.3 总结

1. 什么是宏任务？

➢ 浏览器执行的异步代码
➢ 例如：JS 执行脚本事件，setTimeout/setInterval，AJAX请求完成事件，用户交互事件等

2. 什么是微任务？

➢ JS 引擎执行的异步代码
➢ 例如：Promise对象.then()的回调

3. JavaScript 内代码如何执行？

➢ 执行第一个 script 脚本事件宏任务，里面同步代码
➢ 遇到宏任务/微任务交给宿主环境，有结果回调函数进入对应队列
➢ 当执行栈空闲时，清空微任务队列，再执行下一个宏任务，从1再来

5.Promise.all 静态方法

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

语法：

需求：同时请求“北京”，“上海”，“广州”，“深圳”的天气并在网页尽可能同时显示

代码演示：

<body>
  <ul class="my-ul"></ul>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：掌握Promise的all方法作用，和使用场景
     * 业务：当我需要同一时间显示多个请求的结果时，就要把多请求合并
     * 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
     * code：
     * 北京-110100
     * 上海-310100
     * 广州-440100
     * 深圳-440300
    */
    // 1. 请求城市天气，得到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' } })

    // 2. 使用Promise.all，合并多个Promise对象
    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    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('.my-ul').innerHTML = htmlStr
    }).catch(error => {
      console.dir(error)
    })
  </script>
</body>

6.案例 - 商品分类

商品分类

需求：尽可能同时展示所有商品分类到页面上

步骤：

1. 获取所有的一级分类数据
2. 遍历id，创建获取二级分类请求
3. 合并所有二级分类Promise对象
4. 等待同时成功，开始渲染页面

效果图：

代码：

<body>
  <!-- 大容器 -->
  <div class="container">
    <div class="sub-list">
      <div class="item">
        <h3>分类名字</h3>
        <ul>
          <li>
            <a href="javascript:;">
              <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
              <p>巧克力</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
              <p>巧克力</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
              <p>巧克力</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：把所有商品分类“同时”渲染到页面上
     *  1. 获取所有一级分类数据
     *  2. 遍历id，创建获取二级分类请求
     *  3. 合并所有二级分类Promise对象
     *  4. 等待同时成功后，渲染页面
    */
    axios({
      url: 'http://hmajax.itheima.net/api/category/top'
    }).then(result => {
      // 获取所有一级分类数据
      console.log(result.data.data)

      // 遍历id，创建获取二级分类请求, 这里得到的是所有二级分类的promise对象数组
      const firstObj = result.data.data.map(item => {
        // console.log(item.id)
        return axios({
          url: 'http://hmajax.itheima.net/api/category/sub',
          params: { id: item.id }
        })
      })

      // console.log(firstObj)
      // 合并所有二级分类Promise对象
      const secondObj = Promise.all(firstObj)
      secondObj.then(result => {
        console.log(result)

        // 等待同时成功后，渲染页面
        const thirdObj = result.map(item => {
          const dataObj = item.data.data
          
          // 这里拼接上一级分类和循环遍历一级分类下的二级分类
          return `
             <div class="item">
        <h3>${dataObj.name}</h3>
        <ul>
          
          ${dataObj.children.map(i => {
            return `
                 <li>
            <a href="javascript:;">
              <img src=${i.picture} />
              <p>${i.name}</p>
            </a>
          </li>
              `
          }).join('')}
         
        </ul>
      </div>
          `
        }).join('')

        document.querySelector('.sub-list').innerHTML = thirdObj
      })
    })

  </script>
</body>

7.案例 - 学习反馈

7.1 完成省市区切换效果

步骤：

1. 设置省份数据到下拉菜单
2. 切换省份，设置城市数据到下拉菜单，并清空地区下拉菜单
3. 切换城市，设置地区数据到下拉菜单

页面展示：

代码：

/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */

// 1.1 设置省份下拉菜单数据


axios({
    url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
    // result得到省份对象
    console.log(result)
    const pnameObj = result.data.list.map(pname => {
        return `<option value="${pname}">${pname}</option>`
    }).join('')
    document.querySelector('.province').innerHTML = '<option value="">省份</option>' + pnameObj
})


let pname = ''

// 1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
document.querySelector('.province').addEventListener('change', e => {
    // 获取到当前对象的value值
    // console.log(e.target.value)
    pname = e.target.value
    axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: { pname }
    }).then(result => {
        // result得到城市的对象
        // console.log(result.data.list)
        const cnameObj = result.data.list.map(cname => {
            return ` <option value="${cname}">${cname}</option>`
        }).join('')
        document.querySelector('.city').innerHTML = ' <option value="">城市</option>' + cnameObj
        // 清空地区下拉菜单
        document.querySelector('.area').innerHTML = '<option value="">地区</option>'
    })
})

// 1.3 切换城市，设置地区下拉菜单数据
document.querySelector('.city').addEventListener('change', e => {
    // 获取到当前对象的value值
    // console.log(e.target.value)

    axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: { pname, cname: e.target.value }
    }).then(result => {
        // result得到地区的对象
        // console.log(result.data.list)
        const anameObj = result.data.list.map(aname => {
            return `<option value="${aname}">${aname}</option>`
        }).join('')
        document.querySelector('.area').innerHTML = '<option value="">地区</option>' + anameObj
    })
})

7.2 收集学习反馈数据，提交保存

步骤：

1. 监听提交按钮的点击事件
2. 依靠插件收集表单数据
3. 基于 axios 提交保存，显示结果

页面展示：

代码：

/**
 * 目标2：收集数据提交保存
 *  2.1 监听提交的点击事件
 *  2.2 依靠插件收集表单数据
 *  2.3 基于axios提交保存，显示结果
 */


// 2.1 监听提交的点击事件
document.querySelector('.submit').addEventListener('click', () => {
    // 2.2 依靠插件收集表单数据
    const form = document.querySelector('.info-form')
    const obj = serialize(form, { hash: true, empty: true })
    // 得到表单的提交数据，该数据为一个对象
    // area: "河东区",city: "天津市"
    console.log(obj)

    // 2.3 基于axios提交保存，显示结果
    axios({
        url: 'http://hmajax.itheima.net/api/feedback',
        method: 'POST',
        data: obj
    }).then(result => {
        console.log(result)
        alert(result.data.message)
    }).catch(error => {
        console.dir(error)
        alert(error.response.data.message)
    })
})

原文地址：https://blog.csdn.net/2301_77358195/article/details/142301755

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：如何利用nw.js打包vue项目
下一篇：【Python报错已解决】xlrd.biffh.XLRDError: Excel xlsx file； not supported

机器学习04-逻辑回归（python）-02原理与损失函数
线性回归输出数值，而逻辑回归输出概率。逻辑回归的输出值是 0 到 1 之间的概率，通常我们会设定一个阈值，比如 0.5，将大于 0.5 的归为 1 类，低于 0.5 的归为 0 类。逻辑回归的工作原理
阅读更多2024-09-22
机器学习之实战篇——图像压缩(K-means聚类算法)
②进行图像压缩，需要减少像素点颜色的种类，本案例中假设压缩后颜色种类为16,假设用整数0~15表示每个整数可以用4bit(即0.5byte)表示，对于压缩后的图片，每个像素点只需存储相应的颜色编号，因
阅读更多2024-09-22
常见项目场景题2（多次输错密码禁止登录，分布式下多线程抢夺资源）
因为 Redis 在执行 Lua 脚本时，可以以原子性的方式执行，从而保证锁释放操作的原子性。同时，以 IP 地址为单位进行限制还可以避免黑客通过使用同-IP 地址进行暴力破解等攻击行为。为了防止误删
阅读更多2024-09-22
滚雪球学SpringCloud[6.3讲]：分布式日志管理与分析
在上期【6.2 Zipkin：分布式追踪系统】中，我们探讨了如何在微服务架构下进行分布式追踪，利用Zipkin跟踪跨服务的请求流转路径，以便识别性能瓶颈、监控延迟和排查系统故障。尽管追踪能够帮助我们解
阅读更多2024-09-22
深度学习之概率论预备知识点（3）
随机变量只能取有限个或可数个值，其概率通过概率质量函数（PMF）来表示。
阅读更多2024-09-22
分布式Id生成策略-美团Leaf
分布式系统ID生成一站式解决
阅读更多2024-09-22
分布式变电站电力监控系统
变电站电力监控系统能提供必要的实时运行信息，尤其是开关和保护行为的信息（事故报警信息），使值班人员和系统调度人员把握安全控制、事故处理的主动性，同时可以提高电网的运行管理水平，减少变电、配电损失，提高
阅读更多2024-09-22
【大模型实战篇】一种关于大模型高质量数据的处理方法-无标注数据类别快速识别及重复数据检测（加权向量-卷积神经网络-聚类算法结合）
大模型、高质量数据、加权词向量、聚类、热门问题识别、卷积神经网络、kmeans、cnn、textcnn、文本特征抽取、无监督算法、大模型快速数据预处理
阅读更多2024-09-22
基于深度学习的可再生能源的效率优化
基于深度学习的可再生能源效率优化是一种应用先进人工智能技术来提升太阳能、风能、水能等可再生能源的生产和利用效率的策略。可再生能源的生产效率通常受限于不稳定的自然条件（如日照、风速等），深度学习能够通过
阅读更多2024-09-22
【计算机网络 - 基础问题】每日 3 题（十七）
✍个人博客：Pandaconda-CSDN博客📣专栏地址：http://t.csdnimg.cn/fYaBd📚专栏简介：在这个专栏中，我将会分享 C++ 面试中常见的面试题给大家~📝推荐参考地址：ht
阅读更多2024-09-22

AJAX 进阶 day4

1.同步代码和异步代码

2.回调函数地狱和 Promise 链式调用

2.1 回调函数地狱

2.2 Promise - 链式调用

2.3 Promise 链式应用