Ajax_4(进阶)同步异步+ 宏任务微任务 + Promise链 + async终极解决方案 +事件循环原理 + 综合案例

Forever_Hopeful2023-08-13 19:54

Ajax(进阶)

文章目录

01-同步代码和异步代码

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

目标：阅读并回答代码执行和打印的顺序

html 复制代码 
<script>   
const result = 0 + 1
 console.log(result)
 setTimeout(() => {
   console.log(2)
 }, 2000)
 document.querySelector('.btn').addEventListener('click', () => {
   console.log(3)
 })
 document.body.style.backgroundColor = 'pink'
 console.log(4)
</script>

打印结果为： 1,4,2，点击按钮一次就打印一次3.

  • 注意，异步代码都有一个特性，那就是耗时的、事件的、通过回调函数返回值。都是异步代码。

02-回调函数地域

概念
  1. 在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地域。
缺点
  1. 可读性差
  2. 异常无法捕获
  3. 耦合性严重，牵一发动全身。
代码示例
javascript 复制代码 
 axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
   const pname = result.data.list[0]
   document.querySelector('.province').innerHTML = pname
   // 获取第一个省份的第一个城市
   axios({url: 'http://hmajax.itheima.net/api/city',params: {pname}}).then(result => {
     const cname = result.data.list[0]
     document.querySelector('.city').innerHTML = cname
     // 获取当前城市的第一个地区名字
     axios({url: 'http://hmajax.itheima.net/api/area',params: {pname,cname}}).then(result => {
       const area = result.data.list[0]
       document.querySelector('.area').innerHTML = area
     })
   })
 }).catch(error => {
     console.log(error)
 })
 // 这样一来，就进入了回调地狱了,而且错误无法捕获
  • 回调地域主要就是在回调函数中，不断的使用回到函数。

03-Promise链式调用

概念
  1. 依靠then（）方法 会返回一个新 生成的Promise对象特性，继续串联下一环任务，知道结束。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CI9Ao6Nx-1691654693290)(D:\\桌面\\笔记\\Ajax笔记\\my-note\\Ajax04\\images\\2023-08-07_22-29-32.png)

细节
  1. then（）方法里面的回调函数中的返回值，会影响新生成的Promise对象最终状态和结果。
好处
  1. 通过链式通用，解决回调函数嵌套问题。

需求：把省市的嵌套结构，改成链式调用的线性结构

代码示例
javascript 复制代码 
 const p = new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve('北京市')
   }, 2000)
 })

 //  2、获取省份的名字
 const p2 = p.then(result => {
   console.log(result)
   // 3、创建Promise对象，获取城市名字
   return new Promise((resolve,reject) => {
     setTimeout(() => {
       resolve(result + '---北京')
     },2000)
   })
 })

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

 // then函数原地的结果是一个新的Promise对象
 console.log(p2 === p)  //地址不一样
</script>

04-Promise链式应用

目标：使用Promise解决链式调用，解决回调函数地域的问题。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YV7efGq0-1691654693291)(D:\\桌面\\笔记\\Ajax笔记\\my-note\\Ajax04\\images\\2023-08-07_23-02-04.png)

实现方式：每个Promise对象中管理一个一步任务，用then返回Promise对象，串联起来。

代码示例

需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中

javascript 复制代码 
 let pname = ''
 // 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 => {
   const area = result.data.list[0]
   document.querySelector('.area').innerHTML = area
 })
</script>

05-async函数和await

有什么用呢？
  1. async和await关键字让我们可以用一种更简洁的方式写出基于 Promise的一异步行为，而无需刻意的链式调用Promise.
  2. 解决回调函数地狱
概念
  1. 在async函数内，使用await关键字去掉then函数，等待获取Promise对象成功状态的结果值。
  2. await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
  3. await === Promise对象返回的成功的结果值 （resolve的值）
代码示例
javascript 复制代码 
 // 1.定义一个async修饰的函数
 async function getData() {
   // Promise对象的返回成功的结果被await接收。
   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 area = aObj.data.list[0]

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

awwit会接受Promise对象返回成功的值。

06-async和await-捕获错误

  1. 使用try catch语句标记需要尝试的语句块，并指定一个出现异常时抛出的响应。
  2. 如果try里某一行代码报错后，try中剩余的代码不会执行了。
  3. catch块，接受错误信息,返回的形参可以查看详细信息。
语法
javascript 复制代码 
try {
 //要执行的代码
} catch (error) {
 //error接收的是，错误信息
 //try里的代码，如果有错误，直接进入这里执行
}

07-事件循环（EventLoop）

同步放在执行栈，异步被宿主环境读取，放在任务队列中

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

什么是事件循环
  1. 在执行代码和收集异步任务时，在调用栈空闲时候，反复调用任务队列里的代码执行，就叫做事件循环。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JLX51V2x-1691654693291)(D:\\桌面\\笔记\\Ajax笔记\\my-note\\Ajax04\\images\\2023-08-08_17-19-44.png)

在JavaScript中，数据类型有分为简单数据类型和引用数据类型，当我们js引擎识别到

  • 简单数据类型 放在栈空间存储值（因为简单数据类型没有地址）
  • 引用数据类型（有地址存储在内存中），所以，引用数据类型地址放在栈空间，值放在堆空间，我们程序员能支配栈空间，堆空间由系统来支配，所以深浅考拷贝的问题就在于地址和值的问题，对于此，我们程序员只能操作引用数据类型的地址，而值，不能直接去改变，会产生很多问题。
    事件循环：就是js执行机制分配好存储空间，来决定执行代码
  1. 当代码识别为简单数据类型：则将代码放在执行栈中
  2. 当代码被识别为引用数据类型（复杂数据类型），则将代码放在任务队列中
  • 当执行栈中的代码被执行完毕后，那么js执行机制会向任务队列中读取里面的任务代码，根据所需要执行的事件进行取出任务到执行栈中运行代码。执行完毕后再次读取任务队列中是否还有任务需要执行，如果还有任务，那么继续取出来运行，多次重复的读取操作，就被成为事件循环。
代码体验
javascript 复制代码 
    // 体验JS是单线程的，必须先遍历完，才能改变颜色
    document.querySelector('.time-btn').addEventListener('click', () => {
      for (let i = 0; i < 300000; i++) {
        console.log(i)
      }
      document.body.style.background = 'pink'
    })

    // 为了避免线程卡死，出现了异步代码，把耗时操作放到异步中，先保证主线程执行完所有同步代码
    document.querySelector('.time-btn').addEventListener('click', () => {
      setTimeout(() => {
        for (let i = 0; i < 300000; i++) {
          console.log(i)
        }
      }, 0)
      document.body.style.background = 'pink'
    })
javascript 复制代码 
<script>
console.log(1)
setTimeout(() =>{
    console.log(2)
},2000)
console.log(3)
//打印顺序：1,3,2

console.log(1)
setTimeout(() => {
    console.log(2)
},0)
console.log(3)
//打印顺序还是： 1,3,2    （因为setTimeout是引用数据类型，放到任务队列中等待执行栈中的同步任务执行完，在读取任务队列中的代码执行，并且一次只能执行一个，多个的话，就重复，这样就形成了事件循环）
</script>
练习
javascript 复制代码 
    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,6（不点击事件不执行）

08-宏任务与微任务

ES6之后引入了Promise对象，让JS引擎也可以发起异步任务。

异步任务分为；

宏任务：由浏览器环境执行的异步代码。

微任务：由JS引擎环境执行的代码

执行顺序：执行栈空闲时，宏任务只有等到所有的微任务执行完毕后才会到宏任务中读取任务。

任务（代码） 执行所在的环境
JS脚本执行事件（script） 浏览器
setTimeout/setlnterval 浏览器
Ajax请求完成事件 浏览器
用户交互事件 浏览器

Promise本身是同步代码，而then和catch回调函数是异步的。放在微任务执行。

代码示例
javascript 复制代码 
    console.log(1)
    setTimeout(() => {
      console.log(2)
    }, 0)
    const p = new Promise((resolve, reject) => {
      resolve(3)
    })
    p.then(res => {
      console.log(res)
    })
    console.log(4)
  • 打印顺序为 1 4 3 2
javascript 复制代码 
    console.log(1)
    setTimeout(() => {
      console.log(2)
    },0)
    const p = new Promise((resolve,reject) => {
      console.log(3)
      resolve(4)
    })
    p.then(result => {
      console.log(result)
    })
    console.log(5)
  • 执行顺序为： 1 3 5 4 2

09-经典面试题（事件循环）

javascript 复制代码 
    // 目标：回答代码执行顺序
    console.log(1)
    setTimeout(() => {
      console.log(2)
      const p = new Promise(resolve => resolve(3))
      p.then(result => console.log(result))
    }, 0)
    const p = new Promise(resolve => {
      setTimeout(() => {
        console.log(4)
      }, 0)
      resolve(5)
    })
    p.then(result => console.log(result))
    const p2 = new Promise(resolve => resolve(6))
    p2.then(result => console.log(result))
    console.log(7)
    // 1 7 5 6 2 3 4

10-Promise.all静态方法

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpSvq3KJ-1691654693291)(D:\\桌面\\笔记\\Ajax笔记\\my-note\\Ajax04\\images\\2023-08-10_09-11-37.png)

需要同时结果的时候，就是用Promise.all即可。

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

语法
javascript 复制代码 
const p = Promise.all([Promise对象，Promise对象，....])
p.then(result => {
    //result结果：[Promise对象成功的结果，Promise对象成功的结果，...]
}).catch(error => {
   //第一个失败的Promise对象，抛出的异常 
})
代码示例
javascript 复制代码 
    // 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)
    })

11-商品分类案例

核心步骤：

* 1. 获取所有一级分类数据

* 2. 遍历id，创建获取二级分类请求

* 3. 合并所有二级分类Promise对象

* 4. 等待同时成功后，渲染页面

javascript 复制代码 
    //  1. 获取所有一级分类数据
    axios({ url: 'http://hmajax.itheima.net/api/category/top' }).then(result => {
      console.log(result)
      //2. 遍历id，创建获取二级分类请求
      const list = result.data.data.map(item => {
        return axios({
          url: 'http://hmajax.itheima.net/api/category/sub',
          params: {
            id: item.id
          }
        })
      })
      console.log(list)
      //3. 合并所有二级分类Promise对象   Promise 对象就是所有axios函数的返回值
      const p = Promise.all(list)
      p.then(result => {
        console.log(result)
        // 4. 等待同时成功后，渲染页面
        const htmlStr = result.map(item => {
          // 取出关键的数据对象
          const dataObj = item.data.data
          return `<div class="item">
        <h3>分类名字</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
      })

    })

12-学习反馈案例

* 目标1：完成省市区下拉列表联动切换

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

* 1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单

* 1.3 切换城市，设置地区下拉菜单数据

代码示例
javascript 复制代码 
// 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()
    document.querySelector('.province').innerHTML = `<option value="">省份</option>` + optionStr
})

// 1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
document.querySelector('.province').addEventListener('change', async e => {
    // 立马获取到用户选择的省份名字
    // 拿到省份数据
    const result = await axios({url: 'http://hmajax.itheima.net/api/city',params: { pname: e.target.value}})

    const optionStr = result.data.list.map(cname => `<option value="${cname}">${cname}</option>`).join('')
    // 把默认的城市选项 + 下属城市数据插入到select中
   document.querySelector('.city').innerHTML = `<option value="">城市</option>` + optionStr

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

// 1.3 切换城市，设置地区下拉菜单数据
document.querySelector('.city').addEventListener('change', async e => {
    const result = await 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('')

    document.querySelector('.area').innerHTML = `<option value="">地区</option>` + optionStr
})
// 省市区联动效果。2023年8月10日15:36:15
提交表单

* 目标2： 收集数据提交保存

* 2.1 监听提交的点击事件

* 2.2 依靠插件收集表单元素

* 2.3 基于axios提交缓存，显示结果

代码示例
javascript 复制代码 
// 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//因为接口文档参数名和返回的结果名相同，直接传入data，data配置对象属性名和属性值相同，则简写。
        })
        console.log(result)
        alert(result.data.message)
    } catch(error) {
        console.dir(error)
        alert(error.response.data.message)
    }
})
  1. serialize插件的使用获取表单
  2. async和await修饰函数和获取axios异步响应返回的结果。
  3. 使用try catch（error）来抛出异常，如果响应结果出现问题，那么就返回错误信息。
相关推荐
大猫会长13 分钟前
用AbortController取消事件绑定
前端
程序员小杰@1 小时前
AI前端组件库Ant DesIgn X
开发语言·前端·人工智能
致微1 小时前
Vue项目 bug 解决
前端·vue.js·bug
慕斯策划一场流浪2 小时前
fastGPT—nextjs—mongoose—团队管理之部门相关api接口实现
前端·javascript·html·fastgpt部门创建·fastgpt团队管理·fastgpt部门成员更新·fastgpt部门成员创建
我自纵横20233 小时前
事件处理程序
开发语言·前端·javascript·css·json·ecmascript
坊钰3 小时前
【MySQL 数据库】数据类型
java·开发语言·前端·数据库·学习·mysql·html
我是小路路呀3 小时前
css 文字换行每一个字渐变
前端·css
谢小飞3 小时前
Threejs全球坐标分布效果
前端·three.js
喝拿铁写前端3 小时前
🚀从 0 到 1 构建字段推荐引擎：20+ 工具方法一文打尽！
前端
森叶3 小时前
免费Deepseek-v3接口实现Browser-Use Web UI：浏览器自动化本地模拟抓取数据实录
前端·人工智能·自动化
热门推荐
01生活电子常识--删除谷歌浏览器搜索记录02我决定放弃搞 Java 了03如何在WPS和Word/Excel中直接使用DeepSeek功能04汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量05RAG 实践- Ollama+RagFlow 部署本地知识库06DeepSeek各版本说明与优缺点分析07[AI/GPT/Chat2SQL/RAG] VannaAI08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑1034% 关税冲击下 LabVIEW 开发的变局