AJAX进阶(重点)

目录

◆ 同步代码和异步代码

◆ 回调函数地狱和 Promise 链式调用

什么是回调函数地狱?

Promise - 链式调用

什么是Promise链式调用?

Promise 链式应用 (重点)

◆ async 和 await 使用

async函数和await_捕获错误 

◆ 事件循环-EventLoop(重点)

为什么要学习事件循环?

什么是事件循环? 

事件循环 - 执行过程(重点)

事件循环 - 练习 

宏任务与微任务 (重点)

事件循环 - 经典面试题 

◆ Promise.all 静态方法


◆ 同步代码和异步代码

什么是同步代码,什么是异步代码?

同步代码:

异步代码:

 

同步代码:逐行执行,需原地等待结果后,才继续向下执行 

异步代码:调用后耗时,不阻塞代码继续执行(不必原地等待),在将来完成后触发一个回调函数

例子:回答打印数字的顺序是什么? 

打印结果:1,4,2 点击按钮一次就打印一次 3 

异步代码接收结果:使用回调函数

◆ 回调函数地狱和 Promise 链式调用

什么是回调函数地狱?

需求:展示默认第一个省,第一个城市,第一个地区在下拉菜单中

概念:在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱

缺点:可读性差,异常无法捕获,耦合性严重,牵一发动全身

 

总结:简单讲。回调函数地狱就是在回调函数中嵌套回调函数,进而导致代码耦合度高,异常难以捕获

Promise - 链式调用

什么是Promise链式调用?

概念:依靠 then() 方法会返回一个新生成的 Promise 对象特性,继续串联下一环任务,直到结束

细节:then() 回调函数中的返回值,会影响新生成的 Promise 对象最终状态和结果 

好处:通过链式调用,解决回调函数嵌套问题

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 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 => {console.log(result)const areaName = result.data.list[0]document.querySelector('.area').innerHTML = areaName})</script>
</body></html>

 

总结: 

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

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

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

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

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

  • ➢ 解决回调函数嵌套问题 

◆ async 和 await 使用

定义:

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

示例:

 

 简单来说,当函数使用了async关键字,可以使用await关键字讲函数内的异步函数转化成同步函数

async函数和await_捕获错误 

 

◆ 事件循环-EventLoop(重点)

  • 为什么要学习事件循环?

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

什么是事件循环? 

概念:

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

事件循环 - 执行过程(重点)

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

总结:

1. 什么是事件循环?

  • ➢ 执行代码和收集异步任务,在调用栈空闲时,反复调用任务队列里

回调函数执行机制
2. 为什么有事件循环?

  • ➢ JavaScript 是单线程的,为了不阻塞 JS 引擎,设计执行代码的模型

3. JavaScript 内代码如何执行?

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

事件循环 - 练习 

使用模型,分析代码执行过程

宏任务与微任务 (重点)

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

异步任务分为:

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

例子:

微任务:由 JS 引擎环境执行的异步代码

例子:

Promise 本身是同步的,而then和catch回调函数是异步的 

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

 

JS代码的执行流程:script代码块-》代码块里的同步任务-》微任务-》宏任务 

事件循环 - 经典面试题 

答案:1756234 

总结:

1. 什么是宏任务?

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

2. 什么是微任务?

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

3. JavaScript 内代码如何执行?

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

 

◆ Promise.all 静态方法

概念:合并多个 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的all方法</title>
</head><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></html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/655104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二分查找|详细讲解|两种写法

二分查找 目录 1 介绍2 例题引入3 “左闭右闭”写法4 “左闭右开”写法 1 介绍 二分查找适用于从一个递增或递减的有序数列中查找某一个值 因此&#xff0c;使用二分查找的条件是&#xff1a; 用于查找的内容从逻辑上来看是有序的查找的数量只能是一个而不是多个 在二分查…

RAG应用-七个最常见的故障点

近日&#xff0c;国外研究者发布了一篇论文《Seven Failure Points When Engineering a Retrieval Augmented Generation System》&#xff0c;探讨了在实际工程落地RAG应用过程中容易出的七类问题。 论文地址&#xff1a;https://arxiv.org/pdf/2401.05856.pdf 一、丢失内容&…

【Go-zero】手把手带你在goland中创建api文件并设置高亮

【Go-zero】手把手带你在goland中创建api文件并设置高亮 大家好 我是寸铁&#x1f44a; 总结了一篇手把手带你在goland中创建api文件并设置高亮解决方案的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 问题复盘 在使用go-zero 框架时&#xff0c;常常需要用到goctl 一键生成…

简单易用的购物车

实现了购物基本功能&#xff0c;那来修改一下就可以用&#xff0c;app,h5,小程序都可以 购物车插件 - DCloud 插件市场

会话技术复习笔记

一.登录校验的需求 什么是登录校验&#xff1f; 所谓登录校验&#xff0c;指的是我们在服务器端接收到浏览器发送过来的请求之后&#xff0c;首先我们要对请求进行校验。先要校验一下用户登录了没有&#xff0c;如果用户已经登录了&#xff0c;就直接执行对应的业务操作就可以…

数据结构——用Java实现二分搜索树

目录 一、树 二、二分搜索树 1.二叉树 2.二分搜索树 三、代码实现 1.树的构建 2.获取树中结点的个数 3.添加元素 4.查找元素 &#xff08;1&#xff09;查找元素是否存在 &#xff08;2&#xff09;查找最小元素 &#xff08;3&#xff09;查找最大元素 5.二分搜索…

合并有序链表---链表OJ---归并思想

https://leetcode.cn/problems/merge-two-sorted-lists/?envTypestudy-plan-v2&envIdtop-100-liked 将两个有序的链表合并为一个新的有序链表&#xff0c;那不就是和归并排序中最后合并的思想一样吗&#xff1f;只不过那里合并的是数组&#xff0c;这里合并的是链表。 首先…

StartAI宝藏功能——关键词解析

AIGC的同学们都有一个“世纪难题”——生图咒语。 想要生成高质量的图&#xff0c;关键词是至关重要地。关键词往往能决定一张图的成败&#xff01;当你看见一张戳中你审美的图&#xff0c;想模仿却不知如何下手&#xff0c;只能全网搜索生图咒语。 费事又费力&#xff0c;甚…

leetcode刷题(剑指offer) 50.Pow(x, n)

50.Pow(x, n) 实现 pow(x, n) &#xff0c;即计算 x 的整数 n 次幂函数&#xff08;即&#xff0c;xn &#xff09;。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1024.00000示例 2&#xff1a; 输入&#xff1a;x 2.10000, n 3 输出&#x…

微信小程序|摇骰子

目录 简介设计与功能需求确定用户界面设计确定摇骰子动画效果确定随机数生成算法编码实现实现摇骰子动画测试与优化进行功能测试进行性能测试说明简介 制作一个摇骰子小程序是一个有趣且具有挑战性的项目。通过这个项目,你可以学习如何运用编程技术来模拟骰子的摇动和结果显示…

【LeetCode每日一题】56. 合并区间插入区间

一、判断区间是否重叠 力扣 252. 会议室 给定一个会议时间安排的数组 intervals &#xff0c;每个会议时间都会包括开始和结束的时间 intervals[i] [starti, endi] &#xff0c;请你判断一个人是否能够参加这里面的全部会议。 思路分析 因为一个人在同一时刻只能参加一个会…

Node.js-express

1.了解Ajax 1.1 什么是ajax Ajax的全称是Asynchronous Javascript And XML&#xff08;异步Js和XML&#xff09;. 通俗的理解&#xff1a;在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式&#xff0c;就是Ajax 1.2 为什么要学习Ajax 之前所学的技术&#xff0c…

【git】git update-index --assume-unchanged(不改动.gitignore实现忽略文件)

文章目录 原因分析&#xff1a;添加忽略文件(取消跟踪)的命令&#xff1a;取消忽略文件(恢复跟踪)的命令&#xff1a;查看已经添加了忽略文件(取消跟踪)的命令&#xff1a; 原因分析&#xff1a; 已经维护的项目&#xff0c;文件已经被追踪&#xff0c;gitignore文件不方便修…

用可视化案例讲Rust编程3. 函数分解与参数传递

上一节我们在绘制面要素的时候&#xff0c;发现了函数功能体是三个不同步骤组成的&#xff1a; 读取文件获得geometry把geometry转变为绘图元素trace把绘图元素绘制到地图上 像我们上一节那样&#xff0c;把所有的功能都写在一个函数里面&#xff0c;这样的函数灵活性太差&am…

代理IP购买:选择按流量还是端口收费的代理?

​ 代理通常按以下两种标准之一收费&#xff1a;GB 或端口。但您应该选择哪一个&#xff1f;它们与其他产品有何不同&#xff1f;主要取决于您的需求&#xff0c;每种类型都有自己的优缺点&#xff0c;适合不同的情况。 在本文中&#xff0c;我们将详细分析每种类型&#xff0…

【VSCode】增加或减少一Tab的间隔

文章目录 示例 1&#xff1a;给 console 打印添加一 Tab 的间隔&#xff08;按下tab键即可&#xff09; // 原有的格式 if(a b){ console.log(true) }else{ console.log(false) }// 改变后的格式 if(a b){console.log(true) }else{console.log(false) }示例 2&#xff1a;给…

专有钉钉开发记录,及问题总结

先放几个专有钉钉开发文档 专有钉钉官网的开发指南 服务端(后端)api文档 前端api文档 前端开发工具下载地址 小程序配置文件下载地址 后端SDK包下载地址 专有钉钉域名是openplatform.dg-work.cn 开发记录 开发专有钉钉时有时会遇到要使用钉钉的api&#xff1b;通过 my 的方…

JavaWeb学习|Cookie

学习材料声明 所有知识点都来自互联网&#xff0c;进行总结和梳理&#xff0c;侵权必删。 引用来源&#xff1a;尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版 在此之前&#xff0c;复习一下如何创建项目 首先创建正常的Java项目&#xff0c;之后选择add framework…

C#学习笔记-反射

前言 反射是.NET中的重要机制&#xff0c;通过反射可以得到*.exe或*.dll等程序集内部的接口、类、方法、字段、属性、特性等信息&#xff0c;还可以动态创建出类型实例并执行其中的方法。 反射的功能很强大&#xff0c;任何复杂抽象的分层架构或者复杂的设计模式均是建立在这些…

任务修复实例(1)

实例1 任务名&#xff1a;增强防御&#xff08;quest_template.id 8490&#xff09; 涉及的两个数据表分别为 smart_script 和 creature_summon_groups smart_script Reactstate 取值参考源码 UnitDefines.h 的 ReactStates 定义&#xff0c;其中&#xff1a;0为被动&#…