前端-JavaScript

发布于：2025-03-09 ⋅ 阅读:(97) ⋅ 点赞:(0)

概述

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中，通常的做法是把函数放入 <head> 部分中，或者放在页面底部，把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码文件扩展名是 .js

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件，外部脚本不能包含 <script> 标签。

严格模式通过在脚本或函数的头部添加 use strict; 表达式来声明。

建议统一使用小写的文件名

在 JavaScript 中，很多时候，你需要避免使用 new 关键字。

JS基础

JavaScript 没有任何打印或者输出的函数。

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明

JavaScript 初始化不会提升，JavaScript 只有声明的变量部分会提升，初始化部分不会

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

JavaScript 不支持使用名字来索引数组，只允许使用数字索引。

定义对象,数组元素，最后不能添加逗号

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。对象只有被定义才有可能为 null，否则为 undefined。

判断对象是否存在

if (typeof myObj !== "undefined" && myObj !== null)

JavaScript语法

JavaScript 是一个程序语言。语法规则定义了语言结构。

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e) var length = 16;  

字符串（String）字面量 可以使用单引号或双引号  var lastName = "Johnson";    

数组（Array）字面量 定义一个数组 var cars = ["Saab", "Volvo", "BMW"];   

对象（Object）字面量 定义一个对象 var person = {firstName:"John", lastName:"Doe"}; 

函数（Function）字面量 定义一个函数，methodName函数名

function methodName() {
    // 代码 
}

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值,变量是个名称，字面量是一个值，语句是用分号分隔，JavaScript 对大小写是敏感的。

单行注释以 // 开头，多行注释以 /* 开始，以 */ 结尾。

使用 var 关键词来声明变量，变量未取值时Value = undefined，

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

关键字：

语句 描述
break 用于跳出循环。
catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do ... while 执行一个语句块，在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function 定义一个函数
if ... else 用于基于不同的条件来执行不同的动作。
return 返回结果，并退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出（生成）错误 。
try 实现错误处理，与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时，执行语句块。

运算符：

赋值，算术和位运算符 =  +  -  *  / 在 JS 运算符中描述
条件，比较及逻辑运算符 ==  != <  > 

在 JS 比较运算符中描述

函数

function 定义函数，始终是默认的全局对象

在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面，在浏览器中的页面对象是浏览器窗口(window 对象)。函数会自动变为 window 对象的函数。

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

注意：所有全局变量都属于 window 对象。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，声明时必须进行初始化，且初始化后值不可再修改：

使用 var 关键字声明的全局作用域变量属于 window 对象

使用 let 关键字声明的全局作用域变量不属于 window 对象

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

void关键字：指定要计算一个表达式但是不返回值。

void func()
javascript:void func()

函数的方法：

 apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

call作为call的参数传入（从第二个参数开始）

函数声明

function functionName(parameters) {
  执行的代码
}
//可通过html中id调用
document.getElementById("demo").innerHTML=functionName(parameters);

函数使用 typeof 操作符判断函数类型将返回 "function"，函数有 属性 和 方法。

箭头函数：箭头函数是不能提升的，所以需要在使用之前定义

语法：
(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的
(单一参数) => {函数声明}
单一参数 => {函数声明}

函数参数：

JavaScript 函数定义显式参数时没有指定数据类型。

JavaScript 函数对隐式参数没有进行类型检测。

JavaScript 函数对隐式参数的个数没有进行检测。

ES5如果函数在调用时未提供隐式参数，参数会默认设置为： undefined

JavaScript 函数有个内置的对象 arguments 对象，arguments 对象包含了函数调用的参数数组

通过值传递参数

在函数中调用的参数是函数的隐式参数。

JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。

如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。

隐式参数的改变在函数外是不可见的。

通过对象传递参数

在JavaScript中，可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部（全局变量）。

修改对象属性在函数外是可见的。

内嵌函数：嵌套函数可以访问上一层的函数变量，内嵌函数 plus() 可以访问父函数的 变量

类

类是用于创建对象的模板。

类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。

每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }

 get s_name() {
    return this.sitename;
  }
  set s_name(x) {
    this.sitename = x;
  }
}

定义好类后，我们就可以使用 new 关键字来创建对象，创建对象时会自动调用构造函数方法 constructor()，可以使用method_3方法

关键字 描述
extends 继承一个类
static 在类中定义一个静态方法
super 调用父类的构造方法

类中使用get和set关键字添加 getter 和 setter方法 来获取和设置值
函数声明和类声明之间的一个重要区别在于, 函数声明会提升，类声明不会
静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，在实例化对象之前可以通过 类名.方法名 调用静态方法。静态方法不能在对象上调用，只能在类中调用。
 

对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 

对象只是一种特殊的数据。对象拥有属性和方法。

在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法

Object 构造函数创建一个对象包装器。

Object 构造函数，会根据给定的参数创建对象，具体有以下情况：

  • 如果给定值是 null 或 undefined，将会创建并返回一个空对象。
  • 如果传进去的是一个基本类型的值，则会构造其包装类型的对象。
  • 如果传进去的是引用类型的值，仍然会返回这个值，经他们复制的变量保有和源对象相同的引用地址。
  • 当以非构造函数形式被调用时，Object 的行为等同于 new Object()。

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

JavaScript for...in 语句循环遍历对象的属性。

for (variable in object)
{
    执行的代码……
}

for...in 循环中的代码块将针对每个属性执行一次。

原型（prototype）:为对象提供了继承和共享属性的机制。每个 JavaScript 对象都有一个与之关联的原型对象，通过原型对象，可以实现属性和方法的共享，从而减少内存占用。所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法

Object.create 方法允许你创建一个新对象，并将其原型设置为指定的对象。

  • 原型是一个对象，它是其他对象的模板或蓝图。
  • 当一个对象试图访问一个属性或方法时，如果在该对象自身没有找到，JavaScript 会沿着原型链向上查找，直到找到对应的属性或方法，或者达到原型链的顶端 null 为止。

每个 JavaScript 对象（除了 null）都自动拥有一个隐藏的属性 __proto__，它指向该对象的原型对象。这个 __proto__ 是实现继承的关键

js所有的数字都是由 浮点型类型,采用 IEEE754 标准定义的 64 位浮点格式表示数字

整数（不使用小数点或指数计数法）最多为 15 位。

小数的最大位数是 17，但是浮点运算并不总是 100% 准确

Number 属性

属性 描述
Number.MAX_VALUE 最大值
Number.MIN_VALUE 最小值
Number.NaN 非数字
Number.NEGATIVE_INFINITY 负无穷，在溢出时返回
Number.POSITIVE_INFINITY 正无穷，在溢出时返回
Number.EPSILON

表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别
Number.MIN_SAFE_INTEGER 最小安全整数。
Number.MAX_SAFE_INTEGER 最大安全整数。

数字方法

方法 描述
Number.parseFloat() 将字符串转换成浮点数，和全局方法 parseFloat() 作用一致。
Number.parseInt()

将字符串转换成整型数字，和全局方法 parseInt() 作用一致。
Number.isFinite() 判断传递的参数是否为有限数字。
Number.isInteger() 判断传递的参数是否为整数。
Number.isNaN() 判断传递的参数是否为 isNaN()。
Number.isSafeInteger() 判断传递的参数是否为安全整数。

HTML DOM文档对象模型

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：


修改 HTML 内容的最简单的方法是使用 innerHTML 属性

语法：
document.getElementById(id).innerHTML=新的 HTML

如需改变 HTML 元素的属性，请使用这个语法

document.getElementById(id).attribute=新属性值
例如
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>

改变 HTML 元素的样式

document.getElementById(id).style.property=新样式
例如：
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。

onchange 事件常结合对输入字段的验证来使用。

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件

addEventListener() 方法用于向指定元素添加事件句柄,可以向一个元素添加多个事件句柄

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
useCapture默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

字符串属性

 
属性 描述
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法
字符串方法
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值
模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量，${expression} 占位符，默认函数（当未提供自定义函数时）只执行字符串插值来替换占位符，然后将这些部分拼接到一个字符串中。
 

运算符

== ：等于

===：绝对等于（值和类型均相等）

!=：不等于

!==：严格不等于运算符（值和类型有一个不相等，或两个都不相等）

运算符 描述 例子
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true
方法 描述
toExponential() 把对象的值转换为指数计数法。
toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision() 把数字格式化为指定的长度。

正则表达式

正则表达式是由一个字符序列形成的搜索模式。

语法： /正则表达式主体/修饰符(可选)

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

修饰符 可以在全局搜索中不区分大小写:

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
 

方括号用于查找某个范围内的字符：

表达式 描述
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符：

元字符 描述
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。

est() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

exec() 方法用于检索字符串中的正则表达式的匹配。

JavaScript 验证 API

约束验证 DOM 方法

Property Description
checkValidity() 如果 input 元素中的数据是合法的返回 true，否则返回 false。在html中定义数据的格式
setCustomValidity()

设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下：

setCustomValidity('') 
setCustomValidity(null) 
setCustomValidity(undefined)
 

约束验证 DOM 属性

属性 描述
validity 布尔属性值，返回 input 输入值是否合法
validationMessage 浏览器错误提示信息
willValidate 指定 input 是否需要验证

Validity 属性

input 元素的 validity 属性包含一系列关于 validity 数据属性:

属性 描述
customError 设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch 设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow 设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow 设置为 true, 如果元素的值小于它的最小值。
stepMismatch 设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch 设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing 设置为 true，如果元素 (required 属性) 没有值。
valid 设置为 true，如果元素的值是合法的。
例如:document.getElementById("id1").validity.rangeOverflow 判断id1的元素最大值是否符合html中的max定义
函数 描述
JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

异步

Promise是一种更良好的编程风格
new Promise(function (resolve, reject) {
    // 要做的事情...
});

Promise 构造函数是 JavaScript 中用于创建 Promise 对象的内置构造函数。

Promise 构造函数接受一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态。

  • then：用于处理 Promise 成功状态的回调函数。
  • catch：用于处理 Promise 失败状态的回调函数。
  • finally：无论 Promise 是成功还是失败，都会执行的回调函数。

resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列，两者不能够使起始函数停止运行

例如：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('success');
    } else {
      reject('error');
    }
  }, 1000);
});
 
promise.then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
});

使用 Promise 构造函数创建了一个 Promise 对象，并使用 setTimeout 模拟了一个异步操作。如果异步操作成功，则调用 resolve 函数并传递成功的结果；如果异步操作失败，则调用 reject 函数并传递失败的原因。然后我们使用 then 方法处理 Promise 成功状态的回调函数，使用 catch 方法处理 Promise 失败状态的回调函数。

异步函数async function
 

async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行

框架

jQuery是目前最受欢迎的 JavaScript 框架

Prototype 是一种库，提供用于执行常见 web 任务的简单 API

jQuery框架：

引入：<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">

 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能

AJAX框架

一种使用现有标准的新方法，在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

AJAX = 异步 JavaScript 和 XML，用于创建快速动态网页的技术

AJAX 工作原理

  1. 事件触发（如点击按钮或页面加载）。

  2. AJAX 请求：通过 JavaScript 创建一个 XMLHttpRequest 对象，向服务器发送请求。

  3. 服务器处理请求：服务器（通常使用 PHP、Node.js 等）接收请求，处理并返回响应数据（JSON、XML、HTML等）。

  4. AJAX 响应处理：浏览器接收响应，使用 JavaScript 在页面上更新内容，而无需重新加载整个页面。

XMLHttpRequest 是 AJAX 的基础

if (window.XMLHttpRequest)
	{
		//   IE7+, Firefox, Chrome, Opera, Safari 创建 XMLHttpRequest 对象
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器创建对象
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}



// 配置请求
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头（如果需要的话）
// xhr.setRequestHeader('Content-Type', 'application/json');

// 定义回调函数
xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功，处理响应
        console.log('Response:', xhr.responseText);
    } else {
        // 处理错误
        console.error('Error:', xhr.statusText);
    }
};

// 处理网络错误
xhr.onerror = function () {
    console.error('Request failed');
};

// 发送请求
xhr.send();



XMLHttpRequest 对象方法

方法 描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
send(string)

将请求发送到服务器。

  • string：仅用于 POST 请求
XMLHttpRequest 对象属性
属性 描述
responseText 获得字符串形式的响应数据。
responseXML

获得 XML 形式的响应数据。
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status 200: "OK" 404: 未找到页面
Fetch API 是一种现代的、功能强大的网络请求工具，它允许你通过 JavaScript 异步地请求资源 
fetch(url)
  .then(response => response.json()) // 解析 JSON 数据
  .then(data => console.log(data))   // 处理数据
  .catch(error => console.error('Error:', error)); // 错误处理

get请求：
fetch('url')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

post请求:
fetch('url', {
    method: 'POST', // 指定请求方法
    credentials: 'include', // 允许跨域请求时携带 cookie
    headers: {
        //通过 headers 属性为请求添加自定义的 HTTP 头信息
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        key: 'value'
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

处理响应：
fetch('https://api.example.com/data')
    .then(response => {
        //fetch不会自动将HTTP错误状态(如404或500)作为拒绝的 Promise,仍然需要检查响应状态
        if (!response.ok) {
            //链式调用中，任何地方抛出的错误都会被 .catch() 捕获。
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

//在处理响应时，我们首先检查响应状态是否成功（response.ok），如果不成功则抛出错误

 

常见html的事件

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 鼠标指针移动到指定的元素上时发生
onmouseout 用户从一个 HTML 元素上移开鼠标时发生
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布