4、AJAX进阶 DAY4

最新推荐文章于 2024-10-17 09:40:47 发布

是柚柚耶

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量79

点赞数

分类专栏： AJAX 文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/m0_51394252/article/details/131893431

版权

AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、同步代码和异步代码

1.1 同步代码和异步代码

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

1.2 同步和异步

例子：回答打印数字的顺序是什么？

打印结果：1,4,2
点击按钮一次就打印一次 3
异步代码接收结果：使用回调函数

1.3 总结

什么是同步代码？
➢ 逐行执行，原地等待结果后，才继续向下执行
什么是异步代码？
➢ 调用后耗时，不阻塞代码执行，将来完成后触发回调函数
JS 中有哪些异步代码？
➢ setTimeout / setInterval
➢ 事件
➢ AJAX
异步代码如何接收结果？
➢ 依靠回调函数来接收

二、回调函数地狱和 Promise 链式调用

2.1 回调函数地狱

需求：展示默认第一个省，第一个城市，第一个地区在下拉菜单中
概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全身
ps:耦合性（或称耦合力或耦合度）是一种软件度量，是指一程序中，模块及模块之间信息或参数依赖的程度。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回调地狱</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：演示回调函数地狱
     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
     * 概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
     * 缺点：可读性差，异常无法获取，耦合性严重，牵一发动全身
    */
    // 1. 获取默认第一个省份的名字
    axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
      const pname = result.data.list[0]
      document.querySelector('.province').innerHTML = pname
      // 2. 获取默认第一个城市的名字
      axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }}).then(result => {
        const cname = result.data.list[0]
        document.querySelector('.city').innerHTML = cname
        // 3. 获取默认第一个地区的名字
        axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }}).then(result => {
          console.log(result)
          const areaName = result.data.list[0]
          document.querySelector('.area').innerHTML = areaName
        })
      })
    }).catch(error => {
      // 有错误但是捕获不到
      console.dir(error)
    })
  </script>
</body>

</html>

2.2 Promise - 链式调用

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise_链式调用</title>
</head>

<body>
  <script>
    /**
     * 目标：掌握Promise的链式调用
     * 需求：把省市的嵌套结构，改成链式调用的线性结构
    */
  //  1.创建Promise对象-模拟请求省份名字
  const p = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('北京市')
    }, 2000)
  })
  // 2.获取省份名字
  const p2 = p.then(result => {
    console.log(result)
    // 3.创建Promise对象-模拟请求城市名字
    // return Promise 对象的最终状态和结果，影响到新的Promise对象
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(result + '---北京')
      }, 2000)
    })
  })

  // 4.获取城市名字
  p2.then(result => {
    console.log(result)
  })

  // then()原地的结果是一个新的promise对象
  console.log(p2 === p);
  </script>
</body>

</html>

总结

什么是 Promise 的链式调用？
➢ 使用 then 方法返回新 Promise 对象特性，一直串联下去
then 回调函数中，return 的值会传给哪里？
➢ 传给 then 方法生成的新 Promise 对象
Promise 链式调用有什么用？
➢ 解决回调函数嵌套问题

2.3 Promise 链式应用

目标：使用 Promise 链式调用，解决回调函数地狱问题
做法：每个 Promise 对象中管理一个异步任务，用 then 返回 Promise 对象，串联起来

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise链式调用_解决回调地狱</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：把回调函数嵌套代码，改成Promise链式调用结构
     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
    */
   let name = ''
  //  1.得到-获取省份Promise对象
  axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
    pname = result.data.list[0]
    document.querySelector('.province').innerHTML = pname
    // 2.得到-获取城市Promise对象
    return axios({url: 'http://hmajax.itheima.net/api/city', params: {pname}})
  }).then(result => {
    const cname = result.data.list[0]
    document.querySelector('.city').innerHTML = cname
    // 3.得到-获取地区Promise对象
    return axios({url:'http://hmajax.itheima.net/api/area', params:{pname, cname}})
  }).then(result => {
    console.log(result)
    const areaName = result.data.list[0]
    document.querySelector('.area').innerHTML = areaName
  })
    
  </script>
</body>

</html>

三、async 和 await 使用

3.1 async函数和await

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async函数和await_解决回调函数地狱</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：掌握async和await语法，解决回调函数地狱
     * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
     * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
    */
  //  1.定义async修饰函数
  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 aObj = await axios({url: 'http://hmajax.itheima.net/api/area',params: {pname, cname}})
    const areaName = aObj.data.list[0]
    document.querySelector('.province').innerHTML = pname
    document.querySelector('.city').innerHTML = cname
    document.querySelector('.area').innerHTML = areaName
  }


  getData()
  </script>
</body>

</html>

3.2 async函数和await_捕获错误

<script>
    /**
     * 目标：async和await_错误捕获
    */
    async function getData() {
        try{
          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 aObj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
        const areaName = aObj.data.list[0]

        document.querySelector('.province').innerHTML = pname
        document.querySelector('.city').innerHTML = cname
        document.querySelector('.area').innerHTML = areaName
        } catch (error) {}
        // 2.接着调用catch块，接受错误信息
        // 如果try里某行代码报错后，try中剩余的代码不会执行
        console.dir(erroe)
    }

    getData()
  </script>

四、事件循环-EventLoop

4.1 认识 - 事件循环（EventLoop）

好处：掌握 JavaScript 是如何安排和运行代码的

代码执行都是132

4.2 事件循环（EventLoop）

4.3 事件循环 - 执行过程

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

4.4 总结

什么是事件循环？
➢ 执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里
回调函数执行机制
为什么有事件循环？
➢ JavaScript 是单线程的，为了不阻塞 JS 引擎，设计执行代码的模型
JavaScript 内代码如何执行？
➢ 执行同步代码，遇到异步代码交给宿主浏览器环境执行
➢ 异步有了结果后，把回调函数放入任务队列排队
➢ 当调用栈空闲后，反复调用任务队列里的回调函数

4.5 事件循环 - 练习

<script>
    /**
     * 目标：阅读并回答执行的顺序结果
    */
    console.log(1)  
    setTimeout(() => {
      console.log(2)
    }, 0) 
    function myFn() {
      console.log(3)
    } 
    function ajaxFn() {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://hmajax.itheima.net/api/province')
      xhr.addEventListener('loadend', () => {
        console.log(4)
      })
      xhr.send()
    }  
    for (let i = 0; i < 1; i++) {
      console.log(5)
    }
    ajaxFn()  
    document.addEventListener('click', () => {
      console.log(6)
    })
    myFn()  
    // 1 5 3 2 4
  </script>

五、宏任务与微任务

5.1 宏任务与微任务

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

5.3 总结

什么是宏任务？
➢ 浏览器执行的异步代码
➢ 例如：JS 执行脚本事件，setTimeout/setInterval，AJAX请求完成
事件，用户交互事件等
什么是微任务？
➢ JS 引擎执行的异步代码
➢ 例如：Promise对象.then()的回调
JavaScript 内代码如何执行？
➢ 执行第一个 script 脚本事件宏任务，里面同步代码
➢ 遇到 宏任务/微任务 交给宿主环境，有结果回调函数进入对应队列
➢ 当执行栈空闲时，清空微任务队列，再执行下一个宏任务，从1再来

5.4 事件循环 - 经典面试题

请切换到对应配套代码，查看具体代码，并回答打印顺序

运行结果：1 7 5 8 6 2 3 4

六、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>

七、案例 - 商品分类

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>案例_分类导航</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<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. 等待同时成功后，渲染页面
    */
  //  1. 获取所有一级分类数据
  axios({
    url: 'http://hmajax.itheima.net/api/category/top'
  }).then(result => {
    console.log(result)
    // 2. 遍历id，创建获取二级分类请求
    const secPromiseList = result.data.data.map(item => {
      return axios({
        url: 'http://hmajax.itheima.net/api/category/sub',
        params:{
          id: item.id //一级分类id
        }
      })
    })
    //[二级分类请求Promise对象]
    console.log(secPromiseList)  
    // 3. 合并所有二级分类Promise对象
    const p = Promise.all(secPromiseList)
    p.then(result => {
    console.log(result)
    // 4. 等待同时成功后，渲染页面
    const htmlStr = result.map(item => {
      const dataObj = item.data.data //取出关键数据对象
      return `<div class="item">
        <h3>${dataObj.name}</h3>
        <ul>
          ${dataObj.children.map(item => {
            return `<li>
            <a href="javascript:;">
              <img src="${item.picture}">
              <p>${item.name}</p>
            </a>
          </li>`
          }).join('')}
        </ul>
      </div>`
    }).join('')
    console.log(htmlStr)
    document.querySelector('.sub-list').innerHTML = htmlStr
  })
  })
  
  </script>
</body>

</html>

八、案例 - 学习反馈

学习反馈 - 省市区切换
需求：完成省市区切换效果
步骤：
1.设置省份数据到下拉菜单
2.切换省份，设置城市数据到下拉菜单，并清空地区下拉菜单
3.切换城市，设置地区数据到下拉菜单

需求：收集学习反馈数据，提交保存
步骤：
1.监听提交按钮的点击事件
2.依靠插件收集表单数据
3.基于 axios 提交保存，显示结果

/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */
// 1.1 设置省份下拉菜单数据
axios({
    url:'http://hmajax.itheima.net/api/province',
}).then(result => {
    // console.log(result)
    const optionStr = result.data.list.map(pname => `<option value="${pname}">${pname}</option>`).join('')
    console.log(optionStr)
    document.querySelector('.province').innerHTML = `<option value="">省份</option>`+ optionStr
})
// 1.2 切换省份，设置城市下拉菜单数据清空地区下拉菜单
// console.log(document.querySelector('.province'))
document.querySelector('.province').addEventListener('change', async e => {
    // 获取用户选择省份名字
    console.log(e.target.value)
    const result = await axios({url: 'http://hmajax.itheima.net/api/city', params: {pname: e.target.value}})
    console.log(result)
    const optionStr = result.data.list.map(cname => `<option value="${cname}">${cname}</option>`).join(``)
    console.log(optionStr)
    // 把默认城市选项+下属城市数据插入select中
    document.querySelector('.city').innerHTML = `<option value="">城市</option>`+ optionStr

    // 清空地区数据
    document.querySelector('.area').innerHTML = `<option value="">地区</option>`

    // 1.3 切换城市，设置地区下拉菜单数据
    document.querySelector('.city').addEventListener('change', e => {
        console.log(e.target.value)
        axios({url: 'http://hmajax.itheima.net/api/area', params: {
            pname: document.querySelector('.province').value,
            cname: e.target.value
        }})
        console.log(result)
        const optionStr = result.data.list.map(aname => `<option value="${aname}">${aname}</option>`).join('')
        console.log(optionStr)
        document.querySelector('.area').innerHTML = `<option value="">地区</option>` + optionStr
    })
})

/**
 * 目标2：收集数据提交保存
 * 2.1 监听提交的点击事件
 * 2.2 依靠插件收集表单数据
 * 2.3 基于axios提交保存，显示结果
 */
// 2.1 监听提交的点击事件
document.querySelector('.submit').addEventListener('click', async () => {
    // 2.2 依靠插件收集表单数据
    const form = document.querySelector('.info-form')
    const data = serialize(form, {hash: true, empty: true})
    console.log(data)
    // 2.3 基于axios提交保存，显示结果
    try{
        const result = await axios({
            url: 'http://hmajax.itheima.net/api/feedback',
            method: 'POST',
            data
        })
        console.log(result)
        alert(result.data.message)
    } catch(error) {
        console.dir(error)
        alert(error.response.data.message)
    }

})