两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 Day3

news2024/9/28 19:25:45

前端框架必会的(ajax+node.js+webpack+git)个人学习心得作业及bug记录 Day3

你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客

这是我的 github https://github.com/Qiuner ⭐️

​ gitee https://gitee.com/Qiuner 🌹

如果本篇文章帮到了你 不妨点个吧~ 我会很高兴的 😄 (^ ~ ^)

想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎

  • 官方笔记、资源在 https://pan.baidu.com/s/1Gd-ANtinWR7kh8TPTto10A&pwd=9987

  • 官方接口文档在 欢迎使用 - B站-AJAX和黑马头条-数据管理平台 (apifox.com)

    • 本篇文章比较水,值得一看的是XMLHttpRequest生命周期部分

XMLHttpRequest

  • 静态网页,只有一两个地方需要使用请求来进行前后端交互的时候,使用XML可以实现开发包少的情况

image-20240708214004495

image-20240708214347654

image-20240708223050493

image-20240708223346601

生命周期

事件顺序

  1. readystatechange:当 readyState 属性变化时触发,可能会多次触发。
  2. progress:在数据传输期间周期性地触发,表示数据正在传输。
  3. loadstart:在请求开始时触发。
  4. abort:如果请求被取消时触发。
  5. error:如果请求失败时触发(例如,网络错误)。
  6. load:在成功接收到响应数据时触发。
  7. timeout:如果请求超时时触发。
  8. loadend:在请求完成时触发,无论请求是成功还是失败。

在表面的查询参数

需求

image-20240708223522357

image-20240709111234413

  • 其他的步骤没有什么区别,只是在参数拼接的时候,需要使用浏览器内置对象

带参数的请求

image-20240709111620163

  1. image-20240709112215386

Promise

基础使用

image-20240709112736832

  • 这个promise,用来管理请求成功或失败后要做什么

image-20240709113816165

  • 如果你不知道什么是异常,那可以这么想:异常就是停止程序的断点,那么,抛出异常理所应当为开发者觉得要在这里停止运行代码。
  • 在本例中,这里就是抛出一个错误

image-20240709145336980

Promise三种状态

image-20240709145647483

image-20240709145958271

  • 因为无法改变,所以会是resolve的以兑现状态

image-20240709150014420

小案例

image-20240709150154689

  • Promise和XML都没有自己来判断请求是成功还是失败的能力,因此,只需要将Promise当作报错工具,XML当作请求工作,原本代码的if、else当作判断工具,就能写出这个案例

image-20240709151327252

使用XML和Promise做一个简单的axios

image-20240709151511176

image-20240709151913562

  • 如此,就能实现。这里的config可以在使用的时候传递多个对象

实现支持查询参数传递

image-20240709152728721

image-20240709162809081

增加封装请求体功能

image-20240709162840687

image-20240709163656645

  • 封装axios这一节中,都是用原本的基础语法弄出来的

天气预报案例

image-20240709164005632

数据回显部分

  • 这部代码繁杂,没什么技术含量,建议直接复制

  • 可以捕捉页面元素,进行一个个替换,也可以将代码全部复制下来,使用${}替换

image-20240710091629313

image-20240710091649907

image-20240710092509531

  • 这案例老师讲的很详细了,没什么值得补充的,推荐直接看视频

AJAX-Day03-14.案例_天气预报_展示城市天气_哔哩哔哩_bilibili

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

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

相关文章

flask模块化、封装使用缓存cache(flask_caching)

1.安装flask_caching库 pip install flask_caching 2.创建utils Python 软件包以及cache_helper.py 2.1cache_helper.py代码 from flask_caching import Cachecache Cache()class CacheHelper:def __init__(self, app, config):cache.init_app(app, config)staticmethoddef…

Objective-C 中的 isa 不再是简单的结构体指针

了解 Objective-C 中的 isa 指针内存结构 在 Objective-C 中,isa 指针是对象和类之间的重要桥梁。它不仅帮助运行时系统识别对象的类型,还参与了一些内存和性能优化。本文将深入讲解 isa 指针的内存结构,包括其在早期和现代实现中的演变。 …

科普文:深入理解Mybatis

概叙 (1) JDBC JDBC(Java Data Base Connection,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口组成.JDBC提供了一种基准,据此可以构建更高级的工具和接口,使数据库开发人员能够编写数据库应用程序。 优点…

openWrt入门(2) - ubus

ubus - 帮助输出 ubus list - 列表 要了解当前总线上正在运行哪些服务,只需使用以下 ubus list 命令即可。这将显示向 RPC 服务器注册的所有命名空间的完整列表: 列表显示如下: 指定服务路径来筛选列表 -v选项 要找出特定服务提供哪些过程/方法及其参…

PDManer使用教程及安装包

以下安装包版本比较低,用习惯了,需要高版本可以去官网下载 链接:https://pan.baidu.com/s/1Hj4zJ0UCcdk0YQTlteVCTQ?pwdv72v 提取码:v72v 使用教程 连接数据库 导入表信息 创建关系图 第一步 第二步 如果列显示不全 &#x…

windows10设置环境变量Path步骤

1、鼠标右键“我的电脑”,点击“属性”,打开控制面板窗口,如图: 2、点击“高级系统设置”,弹出设置窗口,如图: 3、点击底部的“环境变量”,弹出环境变量窗口,如图&#x…

着火智能监测识别摄像机

当今社会,环境安全日益受到重视,而着火作为火灾前兆的重要指示物,其监测和及时处理显得尤为重要。为了有效预防火灾并保障公共安全,研发出一种智能监测识别着火的摄像机成为技术创新的关键之一。 这种着火智能监测识别摄像机利用了…

二维码生成需知:名片二维码尺寸多少合适?电子名片二维码制作方法?

随着数字化时代的到来,二维码在各个领域的应用越来越广泛,名片作为商业交流的重要工具之一,也开始逐渐融入二维码的元素。通过在名片上添加二维码,我们可以轻松实现信息的快速传递和分享。然而,名片二维码的尺寸选择成…

深度学习论文: LLaMA: Open and Efficient Foundation Language Models

深度学习论文: LLaMA: Open and Efficient Foundation Language Models LLaMA: Open and Efficient Foundation Language Models PDF:https://arxiv.org/pdf/2302.13971.pdf PyTorch: https://github.com/shanglianlm0525/PyTorch-Networks 1 概述 本文介绍了LLaMA&#xff0…

身份证二要素API,实名认证领域的创新之选

身份证二要素API,是一种实名认证领域的创新解决方案。通过输入姓名和身份证号,该API可以通过官方权威渠道进行核查,实时校验二要素的一致性,并返回生日、性别、籍贯等详细信息。这篇博文将详细介绍身份证二要素API的使用方法&…

【fastadmin 开发实战】select 级联选择

先看实现的效果 1、表单页面实现级联选择 2、级联选项后台可以编辑添加 前端代码&#xff08;编辑窗口&#xff09;&#xff1a; <div class"form-group"><label class"control-label col-xs-12 col-sm-2">{:__(渠道归属)}:</label><…

swift与Internvl下的多模态大模型分布式微调指南(附代码和数据)

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 基于Dify的智能分类方案&#xff1a;大模型结合KNN算法&#xff08;附代码&#xff…

AD3518 SOP-8封装 单节锂电池保护芯片 可替代XB8608/XB8608A

AD3518 是一款内置 MOSFET 的单节锂电池保护芯片。该芯片具有非常低的功耗和非常低阻抗的内置 MOSFET。该芯片有充电过压&#xff0c;充电过流&#xff0c;放电过压&#xff0c;放电过流&#xff0c;过热&#xff0c;短路&#xff0c;电芯反接等各项保护等功能&#xff0c;确保…

MUNIK解读ISO26262:安全计划

前言 当我们进行功能安全开发时&#xff0c;由于整个项目周期和内容较多&#xff0c;因此需要在项目前期对一些问题提前进行规划&#xff1a;比如功能安全开发具体分为几个阶段&#xff0c;应该怎么去做&#xff1f;对于不同的环节&#xff0c;有哪些人员来执行&#xff1f;资…

@RequestBody注解的使用及源码解析

前言 RequestBody 注解是我们进行JavaEE开发&#xff0c;最常见的几个注解之一&#xff0c;这篇博文我们以案例和源码相结合&#xff0c;帮助大家更好的了解 RequestBody 注解 使用案例 1.自定义实体类 Data NoArgsConstructor AllArgsConstructor public class User {priv…

飞睿智能6公里WiFi图传接收模块,低延迟、抗干扰、高速稳定传输数据,无人机、农田远距离WiFi模块

在科技日新月异的今天&#xff0c;无线通信技术正以前所未有的速度发展&#xff0c;不仅改变了我们的生活方式&#xff0c;还为企业带来了前所未有的商业机遇。今天&#xff0c;我要向大家介绍一款飞睿智能的产品——6公里WiFi图传接收模块&#xff0c;它以其高性能、稳定的传输…

安防综合管理/视频汇聚平台EasyCVR视频监控存储技术:高效稳定的视频数据保障方案

随着科技的飞速发展&#xff0c;视频监控已成为现代社会不可或缺的一部分。无论是城市治安、交通管理&#xff0c;还是商业安保、家庭监控&#xff0c;视频监控都发挥着至关重要的作用。而在这背后&#xff0c;视频监控存储技术则是确保监控数据得以长期保存、高效检索和可靠利…

今天,纷享AI正式发布,开启智能CRM新纪元

纷享销客作为国产CRM中连续四年保持近40%增长的领先品牌&#xff0c;一直在探索AICRM领域的数字化变革。 7月10日&#xff0c;纷享AI产品正式上线。与通用大模型不同&#xff0c;纷享AI是在合规之下&#xff0c;开放性的接入各种大模型平台&#xff0c;并结合纷享销客在营销服…

Python爬虫教程第4篇-使用BeautifulSoup解析html

文章目录 Beautiful Soup简介安装Beautiful Soup快速开始如何使用Beautiful Soup中的对象TagNameAttributes多值属性 NavigableStringBeautifulSoupComment 遍历文档树子节点tag名字.contents 和 .children.descendants.strings 和 stripped_strings 父节点.parent.parents 兄弟…

深入解析RocketMQ的名字服务机制:功能、原理与应用

NameServer 是专为 RocketMQ 设计的轻量级名字服务&#xff0c;它的源码非常精简&#xff0c;八个类 &#xff0c;少于 1000 行代码。 这篇文章&#xff0c; 笔者会从基础概念、Broker 发送心跳包、NameServer 维护路由、Zookeeper vs NameServer 四个模块揭秘名字服务的设计精…