IT评测·应用市场-qidao123.com

标题: JavaScript根本知识 [打印本页]
作者: 宝塔山    时间: 2025-3-13 16:48
标题: JavaScript根本知识
一、JavaScript基础

1.变量（重点）


1-1 界说变量及赋值

  1. //定义一个变量
  2. var num
  4. //给一个变量赋值
  5. num = 100
  7. //定义一个变量的同时给其赋值
  8. var num2 = 200
复制代码

1-2 变量的命名规则和命名规范


2.数据范例转换


2-1 其他数据范例转成数值

2-2 其他数据范例转成字符串

2-3 其他数据范例转成布尔

3.函数


4.对象


4-1 创建对象


4-2 数据范例之间存储的区别


根本数据范例在内存中的存储情况

复杂数据范例在内存中的存储情况

5.数组

5-1 数组的常用方法

6.字符串

6-1 字符串的常用方法

6-2 json字符串(重要用来前后端交换)

json字符串的格式：'{"key" : 110 , "key" : "110"}'
      6-3 模板字符串

普通字符串用单引号或双引号来表示，而模板字符串用``来表示
  1. var name = "aaa\
  2. bbb\
  3. ccc
  4. "
  5. //普通字符串想要换行输入就要加上""
  7. var name1 = `aaa
  8. bbb
  9. ccc`
  10. //模板字符串就可以直接换行
  12. var myname = "xie"
  13. var str = `my name is ${myname} ${10 + 20} ${10 > 20 ? 'aaa' : 'bbb'}`
  14. //这种写法会把${}里面的数据自动解析，如myname会自动写成xie
复制代码
7.数字

7-1 数字的常用方法

8.时间对象

8-1创建时间对象

  1. //不传参数，表示当前的北京时间
  2. var date = new Date()
  3. console.log(date);//自动转为字符串
  5. //new Date传参
  6. //1个参数   毫秒数
  7. var date1 = new Date(1000)
  8. console.log(date1);//1970-1-1 08:00:01
  9. //都是从1970年1月1日开始计算的，因为中国是东八区，所以是8小时
  10. //2个参数   年 月
  11. var date2 = new Date(2020,10)//月份是从0开始的
  12. console.log(date2);//2020-11-01 08:00:00
  13. //3个参数   年 月 日
  14. var date3 = new Date(2020,10,10)
  15. console.log(date3);//2020-11-10 08:00:00
  16. //后面的时 分 秒依次类推
  19. //new Date传字符串
  20. var date8 = new Date('2020-11-10 10:10:10')
  21. console.log(date8);//2020-11-10 10:10:10
  22. var date9 = new Date('2020/11/10 10:10:10')
  23. console.log(date9);//2020-11-10 10:10:10
复制代码
8-2 时间对象的常用方法

8-3 倒计时计时器


8-4 隔断定时器


二、BOM


1. 获取浏览器窗口的尺寸


2. 浏览器的弹出层


3.浏览器的地址信息


4. 浏览器的常见事件


5. 浏览器的历史记录


history.back

history.forword

6. 浏览器本地存储

6-1 loclocalStorage：永久存储

  1. //增
  2. localStorage.setItem("age" , "14")
  3. //存数据, 两个参数, 第一个是键, 第二个是值
  4. //只能存储字符串，如果要存储对象，那么可以使用`JSON`字符串
  5. //如果之前的键已经存在，那么会覆盖原来的值，也就是修改
  7. //取
  8. localStorage.getItem("age")
  10. //删
  11. localStorage.removeItem("age")
  13. //清空
  14. localStorage.clear()
复制代码
6-2 sessionStorage：临时存储

  1. //增
  2. sessionStorage.setItem("age" , "14")
  3. //取
  4. sessionStorage.getItem("age")
  5. //删
  6. sessionStorage.removeItem("age")
  7. //清空
  8. sessionStorage.clear()
复制代码
  sessionStorage：关闭页面数据就会消散
  三、DOM


1. 获取一个元素

2. 操纵元素属性

2-1 操纵原生属性

  1. <body>
  2.     <div id = "box">hello</div>
  3.     <input type = "text" id = "password">
  5.     <script>
  6.         box.innerHTML = "world"   //这个会将id为box的div里面的内容改为"world"
  7.         password.type = "password"  //这个会将id为password的文本框改为密码框
  8.     </script>
  9. </body>
复制代码
  注意：这些都是通过id来修改里面的属性
  2-2 自界说属性

  1. <body>
  2.     <ul>
  3.         <li>111</li>
  4.         <li>222</li>
  5.         <li>333</li>
  6.         <li>444</li>
  7.     </ul>
  9.     <div id = "box" nb = "222"></div>
  10.     <script>
  11.         //自定义属性有两种方式
  12.         //第一种
  13.         //setAttribute(设置属性)、getAttribute(获取属性的值)、removeAttribute(删除属性)
  14.         var itmes = document.getElementsByTagName("li")
  15.         for (var i = 0 ; i < itmes.length ; i++) {
  16.             itmes[i].setAttribute("index" , i)//这样给每个li的标签都添加了一个名为"index"的属性，并且值为"i"
  17.         }
  18.         
  19.         //第二种方法(比较推荐，主流，主要是为了方便区分自己定义的属性和原生属性)
  20.         //他会以"data-*****"的方式出现，便于区分
  21.         var oitmes = document.getElementsByTagName("li")
  22.         for (var i = 0 ; i < oitmes.length ; i++) {
  23.             oitmes[i].dataset.index = i  //这样给每个li的标签都添加了一个名为"data-index"的属性，并且值为"i"
  24.         }
  25.         
  26.         //想要删除这个属性的话用下面的方法
  27.         delete box.dataset.nb
  28.     </script>
  29. </body>
复制代码
  注意：一般都是用下面的方法，比力常用
  3. 操纵元素文本内容


4. 操纵元素样式


5. 操纵元素类名

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .item{
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: red;
  12.             color: black;
  13.             border-radius: 10px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div id = "box" class = "item item1 item2">hello world</div>
  20.     <button id = "btn">click</button>
  22.     <script>
  23.         //.className 可以获取到元素的所有样式
  24.         //.className 可以设置元素的样式
  26.         console.log(box.className)
  28.         box.className = "item item1"//这样会覆盖前面的样式
  29.         box.className += " item2"//注意要有空格，否则会跟前面的样式合并
  31.         //classList 是一个类数组对象，里面存放着元素的所有样式
  33.         console.log(box.classList)
  35.         box.classList.add("item3")//添加样式
  36.         box.classList.remove("item1")//移除样式
  37.         // box.classList.toggle("item")//切换样式，如果有就移除，如果没有就添加
  39.         btn.onclick = function(){
  40.             box.classList.toggle("item")
  41.         }
  42.     </script>
  43. </body>
  44. </html>
复制代码
6. DOM节点


6-1 元素节点


6-2 属性节点


6-3 文本节点


6-4 获取节点的方式

  1. <body>
  2.     <div id="box">
  3.         kerWin
  4.         <p>111</p>
  5.         <!-- 我是注释 -->
  6.     </div>
  8.     <script>
  9.             // 1.\n
  10.             // kerWin
  11.             // \n
  12.             // 2.<p>111</p>
  13.             // 3.\n
  14.             
  15.             // 4.<!-- 我是注释 -->
  16.             // 5.\n
  18.         //childNodes属性   vs   children属性
  19.         //childNodes属性返回指定节点的子节点集合
  20.         //children属性返回指定节点的子元素集合
  21.         console.log(box.childNodes)//返回所有节点
  22.         console.log(box.children)//返回所有元素
  24.         //firstChild   vs   firstElementChild
  25.         //firstChild属性返回指定节点的第一个子节点
  26.         //firstElementChild属性返回指定节点的第一个子元素
  27.         console.log(box.firstChild)//返回第一个节点
  28.         console.log(box.firstElementChild)//返回第一个元素
  30.         //lastChild   vs   lastElementChild
  31.         //lastChild属性返回指定节点的最后一个子节点
  32.         //lastElementChild属性返回指定节点的最后一个子元素
  33.         console.log(box.lastChild)//返回最后一个节点
  34.         console.log(box.lastElementChild)//返回最后一个元素
  36.         //previousSibling   vs   previousElementSibling
  37.         //previousSibling属性返回指定节点的前一个兄弟节点
  38.         //previousElementSibling属性返回指定节点的前一个兄弟元素
  39.         console.log(box.previousSibling)//返回前一个兄弟节点
  40.         console.log(box.previousElementSibling)//返回前一个兄弟元素
  42.         //nextSibling   vs   nextElementSibling
  43.         //nextSibling属性返回指定节点的后一个兄弟节点
  44.         //nextElementSibling属性返回指定节点的后一个兄弟元素
  45.         console.log(box.nextSibling)//返回后一个兄弟元素
  46.         console.log(box.nextElementSibling)//返回后一个兄弟元素
  48.         //parentNode   vs   parentElement
  49.         //parentNode属性返回指定节点的父节点
  50.         //parentElement属性返回指定节点的父元素
  51.         console.log(box.parentNode)//返回父节点
  52.         console.log(box.parentElement)//返回父元素
  54.         
  55.     </script>
  56.     </script>
  57. </body>
  58. </html>
复制代码
6-5 节点操纵

6-6 节点属性

nodeTypenodeNamenodeValue元素节点1大写标署名null属性节点2属性名属性值文本节点3#text文本内容 6-7 获取元素尺寸

注意：

6-8 获取元素偏移量

6-9 获取可视窗口的尺寸

7. 事件


7-1 初识事件

7-2 事件解绑

7-3 事件范例

7-4 事件对象


7-5 事件委托


事件触发

target

8. 正则表达式


8-1 元字符

  1. <body>
  2.     <script>
  3.         // 1. \d :匹配一个数字字符。等价于 [0-9]。
  4.         var reg = /\d/
  5.         console.log(reg.test('1')) // true
  6.         console.log(reg.test('a')) // false
  7.         console.log(reg.test('1a')) // true
  8.         console.log(reg.test('a1')) // true
  10.         // 2. \D :匹配一个非数字字符。等价于 [^0-9]。
  11.         var reg = /\D/
  12.         console.log(reg.test('1')) // false
  13.         console.log(reg.test('a')) // true
  15.         // 3. \s :匹配一个空白字符，包括空格、制表符、换页符和换行符。
  16.         var reg = /\s/
  17.         console.log(reg.test(' ')) // true
  18.         console.log(reg.test('\t')) // true
  20.         // 4. \S ：匹配一个非空白字符。等价于 [^\s]。
  21.         var reg = /\S/
  22.         console.log(reg.test(' ')) // false
  23.         console.log(reg.test('a')) // true
  25.         // 5. \w ：匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
  26.         var reg = /\w/
  27.         console.log(reg.test('a')) // true
  28.         console.log(reg.test('1')) // true
  30.         // 6. \W ：匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
  31.         var reg = /\W/
  32.         console.log(reg.test('a')) // false
  33.         console.log(reg.test('1')) // false
  35.         // 7. . :匹配任意内容（换行符不算）
  36.         var reg = /zo*/
  37.         console.log(reg.test('z')) // true
  38.         console.log(reg.test('zo')) // true
  40.         // 8. \ :转义字符
  41.         var reg = /\./
  42.         console.log(reg.test('.')) // true
  43.         console.log(reg.test('a')) // false
  44.     </script>
  45. </body>
复制代码
8-2 界限符

  1. <body>
  2.     <script>
  3.         // 1. ^ ：匹配输入字符串的开始位置。
  4.         var reg = /^\d/
  5.         console.log(reg.test('aab')) // false
  6.         console.log(reg.test('1b')) // true
  8.         // 2. $ ：匹配输入字符串的结束位置。
  9.         var reg = /\d$/
  10.         console.log(reg.test('aab')) // false
  11.         console.log(reg.test('a1')) // true
  13.         // 3. ^开头结尾$
  14.         var reg = /^\d$/
  15.         console.log(reg.test('aab')) // false
  16.         console.log(reg.test('1')) // true
  17.     </script>
  18. </body>
复制代码
8-3 限定符

  1. <body>
  2.     <script>
  3.         // 1. * :匹配前面的子表达式零次或多次。
  4.         var reg = /zo*/
  5.         console.log(reg.test('z')) // true
  6.         console.log(reg.test('zo')) // true
  8.         // 2. + :匹配前面的子表达式一次或多次。
  9.         var reg = /zo+/
  10.         console.log(reg.test('z')) // false
  11.         console.log(reg.test('zo')) // true
  12.         console.log(reg.test('o')) // false
  14.         // 3. ? :匹配前面的子表达式零次或一次。
  15.         var reg = /zo?/
  16.         console.log(reg.test('z')) // true
  17.         console.log(reg.test("zozo")) // true
  18.         console.log(reg.test("zo")) // true
  19.         console.log(reg.test("o")) // false
  21.         // 4. {n} :n 是一个非负整数。匹配确定的 n 次。
  22.         var reg = /zo{2}/
  23.         console.log(reg.test('z')) // false
  24.         console.log(reg.test("zo")) // false
  25.         console.log(reg.test("zoo")) // true
  26.         console.log(reg.test("zooo")) // true
  28.         // 5. {n,} :n 是一个非负整数。至少匹配n 次。
  29.         var reg = /zo{2,}/
  30.         console.log(reg.test('z')) // false
  31.         console.log(reg.test("zo")) // false
  32.         console.log(reg.test("zoo")) // true
  34.         // 6. {n,m} :最少匹配 n 次且最多匹配 m 次。
  35.         var reg = /zo{2,3}/
  36.         console.log(reg.test('z')) // false
  37.         console.log(reg.test("zo")) // false
  38.     </script>
  39. </body>
复制代码
8-4 特别符号

  1. <body>
  2.     <script>
  3.         // 1. () :匹配括号内的表达式，也表示一个组。
  4.         var reg = /(abc){2}/
  6.         console.log(reg.test('abc')) // false
  7.         console.log(reg.test('abcabc')) // true
  9.         // 2. | :表示或。
  10.         var reg = /abc|cba/
  12.         console.log(reg.test('abc')) // true
  13.         console.log(reg.test('cba')) // true
  14.         console.log(reg.test('ab')) // false
  16.         // 3. [] :字符集。匹配包含的任一字符。
  17.         var reg = /[abc]/
  19.         console.log(reg.test('a')) // true
  20.         console.log(reg.test('b')) // true
  21.         console.log(reg.test('d')) // false
  23.         // 4. [^] :排除字符集。匹配未包含的任何字符。
  24.         var reg = /[^abc]/
  26.         console.log(reg.test('a')) // false
  27.         console.log(reg.test('b')) // false
  28.         console.log(reg.test('d')) // true
  29.     </script>
  30. </body>
复制代码
8-5 捕捉exec

   语法：reg.exec(“字符串”)
  标识符：（他是写在正则表达式的外面的，如：/\d/g）
8-6 正则与字符串方法

9. this指向

改变this指向：

  1. <body>
  2.     <button id="btn">click</button>
  3.     <script>
  4.         // call apply bind
  6.         var name = "111"
  8.         var obj1 = {
  9.             name : "obj1",
  10.             getName :function(a , b ,c) {
  11.                 console.log("getName1" , this.name)
  12.                 console.log("参数" , a, b, c)
  13.             }
  14.         }
  16.         var obj2 = {
  17.             name : "obj2",
  18.             getName :function(a , b ,c) {
  19.                 console.log("getName2" , this.name)
  20.                 console.log("参数" , a, b, c)
  21.             }
  22.         }
  23.         // call 方法
  24.         // 语法：函数.call(谁调用我，参数1，参数2，参数3，...)
  25.         // 作用：改变函数的this指向
  26.         // 返回值：函数的返回值
  27.         obj1.getName.call(obj2, 1, 2, 3)
  29.         // apply 方法
  30.         // 语法：函数.apply(谁调用我，[参数1，参数2，参数3，...])
  31.         // 作用：改变函数的this指向
  32.         // 返回值：函数的返回值
  33.         obj1.getName.apply(obj2, [1, 2, 3])
  35.         // bind 方法
  36.         // 语法：函数.bind(谁调用我，参数1，参数2，参数3，...)
  37.         // 作用：改变函数的this指向
  38.         // 返回值：函数
  39.         var fun1 = obj1.getName.bind(obj2, 1, 2, 3)
  40.         console.log(fun1)//函数
  41.         fun1()//手动执行
  43.         btn.onclick = handler.bind(window)
  45.         function handler() {
  46.             console.log(1111 , this)
  47.         }
  49.     </script>
  50. </body>
复制代码
四、ES6

1. ES6界说变量

let和const关键字

2. ES6的箭头函数

   语法： var test = () => {}
  可以省略function，变成=>
   3. ES6的解构赋值

4. ES6的睁开运算符

5. ES6模块化语法

   注意：
    五、面向对象

1. 对象基础

1-1 创建对象

  1. // 字面量创建
  2. const obj = {
  3.   name: 'John',
  4.   sayHi() {
  5.     console.log(`Hi, ${this.name}`);
  6.   }
  7. };
  9. // new Object() 创建
  10. const obj2 = new Object();
  11. obj2.age = 30;
复制代码
1-2 属性访问

  1. // 点语法
  2. console.log(obj.name);
  4. // 方括号语法
  5. console.log(obj['name']);
复制代码
2. 构造函数

2-1 根本用法

  1. function Person(name, age) {
  2.   this.name = name;
  3.   this.age = age;
  4.   
  5.   this.introduce = function() {
  6.     console.log(`I'm ${this.name}, ${age} years old`);
  7.   };
  8. }
  10. const p1 = new Person('Alice', 25);
复制代码
2-2 new关键字的作用

2-3 注意事项

3. 原型(Prototype)

3-1 原型链机制

  1. function Animal(name) {
  2.   this.name = name;
  3. }
  4. //用prototype这个可以节省空间
  5. Animal.prototype.eat = function() {
  6.   console.log(`${this.name} is eating`);
  7. };
  9. const cat = new Animal('Mimi');
  10. cat.eat(); // 通过原型链查找方法
  12. //对象.__proto__ === 构造函数.prototype
复制代码
3-2 原型相关方法

  1. // 检查原型
  2. console.log(Object.getPrototypeOf(cat) === Animal.prototype);
  4. // 设置原型
  5. const dog = { name: 'Buddy' };
  6. Object.setPrototypeOf(dog, Animal.prototype);
复制代码
4. ES6 Class

4-1 类界说

  1. class Rectangle {
  2.   //构造器函数
  3.   constructor(height, width) {
  4.     this.height = height;
  5.     this.width = width;
  6.   }
  8.   // 方法
  9.   get area() {
  10.     return this.calcArea();
  11.   }
  13.   calcArea() {
  14.     return this.height * this.width;
  15.   }
  17.   // 静态方法
  18.   static info() {
  19.     console.log('This is a Rectangle class');
  20.   }
  21. }
复制代码
4-2 继续

  1. class Square extends Rectangle {
  2.   constructor(side) {
  3.     super(side, side);
  4.   }
  5. }
复制代码
5. 继续

5-1 构造函数继续

  1. function student(name , age , classroom) {
  2.     //这里就是属性继承，方法没法继承
  3.     Person.call(this , name , age)
  4.     this.classroom = classroom
  5. }
复制代码
5-2 原型链继续

  1. function Parent() {
  2.   this.name = 'Parent';
  3. }
  5. Parent.prototype.sayName = function() {
  6.   console.log(this.name);
  7. };
  9. function Child() {}
  10. Child.prototype = new Parent();
  12. const child = new Child();
复制代码
5-3 组合继续(经典继续)

  1. function Parent(name) {
  2.   this.name = name;
  3. }
  5. function Child(name, age) {
  6.   Parent.call(this, name); // 继承属性
  7.   this.age = age;
  8. }
  9. //方法继承
  10. //Child.prototype = Object.create(Parent.prototype);
  11. //Child.prototype.constructor = Child;
  12. Child.prototype = new Parent()
复制代码
5-4 ES6类继续

  1. class Vehicle {
  2.     constructor(wheels) {
  3.         this.wheels = wheels;
  4.     }
  5.     say() {
  6.         console.log('aa')
  7.     }
  8. }
  10. //extends继承
  11. class Car extends Vehicle {
  12.     constructor(wheels, brand) {
  13.         //super继承父类里面的元素
  14.         super(wheels);
  15.         this.brand = brand;
  16.     }
  18.     //覆盖
  19.     say() {
  20.         //super.say()//调用父类方法
  21.         console.log('bb')
  22.     }
  23. }
复制代码
六、ajax


1. 根本用法

1-1 创建 XMLHttpRequest 对象

  1. let xhr = new XMLHttpRequest(); // 现代浏览器
  2. // 兼容旧版 IE（<= IE6）：
  3. // let xhr = new ActiveXObject("Microsoft.XMLHTTP");
复制代码
1-2 设置请求

  1. xhr.open(method, url, async);
  2. // method: "GET", "POST" 等
  3. // url: 请求地址
  4. // async: 是否异步（默认 true：异步，false：同步）
复制代码
  注意：假如是true,表示异步可以后面的代码实行了在调用onreadystatechange函数，但是假如是false，假如后面的代码已经实行了，那么onreadystatechange函数就不会实行了，除非将这个函数放在xhr.send()的前面才会调用这个函数再实行后面的代码
  异步效率更高，一般都是异步，用true
  1-3 发送请求

  1. /*
  2.         get:偏向获取数据
  3.         post:偏向提交数据
  4.         put:偏向更新数据（全部）
  5.         delete:偏向删除信息
  6.         patch:偏向部分修改
  7.         主要还是前面两个
  8. */
  9. xhr.send(); // GET 请求
  10. xhr.send(data); // POST 请求（可发送表单数据等）
复制代码
1-4 处理响应

  1. //注册事件,接受服务器返回的数据
  2. xhr.onreadystatechange = function() {
  3.   //readyState  0-4:请求未发送 1:请求已发送 2:请求已接收 3:请求处理中4:请求已完成
  4.   //status 200-300
  5.   //status 404:请求的资源不存在 500:服务器内部错误
  6.   if (xhr.readyState === 4 && xhr.status === 200) {
  7.     // 处理响应数据
  8.     console.log(xhr.responseText); // 文本格式
  9.     console.log(xhr.responseXML);  // XML 格式
  10.   }
  11. };
  12. //这个不用判断readyState是否为4，因为他已经要是4才能执行这个函数
  13. xhr.onload = function(){
  14.             if(xhr.status == 200) {
  15.                 console.log(xhr.responseText)
  16.             } else if (xhr.status == 404) {
  17.                 console.error('请求的资源不存在')
  18.             } else if (xhr.status == 500) {
  19.                 console.error('服务器内部错误')}
  20.         }
复制代码
常见的HTTP状态码

2. 封装ajax

  1. //将一个对象函数转化为查询字符串如：a = 1 & b = 2 & c = 3这种形式
  2. function queryStringify(obj) {
  3.     let str = ''
  4.     for (let k in obj) str += `${k}=${obj[k]}&`
  5.     return str.slice(0, -1)
  6. }
  8. //封装ajax
  9. function ajax(options) {
  10.     let defaultoptions = {
  11.         url : '',
  12.         method : 'get' ,
  13.         async : true,
  14.         data : {} ,
  15.         headers : {
  16.             'Content-Type' : 'application/json'
  17.         } ,
  18.         success : function () {},
  19.         error : function () {}
  20.     }
  21.     //将传入的参数和默认参数合并
  22.     let {url , method, async, data, headers, success, error} = {
  23.         ...defaultoptions,
  24.         ...options
  25.     }
  27.     //判断请求方式和数据类型来修改data
  28.     //headers['Content-Type']?.indexOf('json') > -1：判断headers中是否有Content-Type并且值为json，这里面的问号表示可选链操作符，意思是如果headers中没有Content-Type，那么就不会执行后面的indexOf方法，不会报错
  29.     if(typeof data === 'object' && headers['Content-Type']?.indexOf('json') > -1 && method === 'post') {
  30.         data = JSON.stringify(data)
  31.     } else {
  32.         data = queryStringify(data)
  33.     }
  35.     //如果是get请求，那么就将数据拼接在url后面
  36.     if(/^get$/i.test(method) && data) url += `?${data}`
  38.     //发送请求
  39.     const xhr = new XMLHttpRequest()
  40.     xhr.open(method, url, async)
  41.     xhr.onload = function() {
  42.         if(!/^2\d{2}$/.test(xhr.status)) {
  43.             error(`错误状态码：${xhr.status}`) //如果状态码不是2开头的，就执行error函数
  44.             return
  45.         }
  47.         //执行解析
  48.         try {
  49.             let res = JSON.parse(xhr.responseText)
  50.             success(res)
  51.         } catch (err) {
  52.             error("解析失败！因为后端返回的结果不是json格式字符串")
  53.         }
  54.     }
  56.     //设置请求头内的信息
  57.     for (let k in headers) xhr.setRequestHeader(k, headers[k])
  59.     //发送请求
  60.     if(/^get$/i.test(method)) {
  61.         xhr.send()
  62.     } else {
  63.         xhr.send(data)
  64.     }
  65. }
  67. //promise封装ajax
  68. function pajax(options) {
  69.     return new Promise((resolve , reject) => {
  70.         ajax({
  71.             ...options,
  72.             success(res) {
  73.                 resolve(res)
  74.             } ,
  75.             error(err) {
  76.                 reject(err)
  77.             }
  78.         })
  79.     })
  80. }
  82. // export {ajax , pajax}
  83. // export default ajax
复制代码
七、Promise


1. Promise根本语法

  1. // 回调地狱示例
  2. doSomething(function(result) {
  3.   doSomethingElse(result, function(newResult) {
  4.     doThirdThing(newResult, function(finalResult) {
  5.       console.log('Final result: ' + finalResult);
  6.     }, failureCallback);
  7.   }, failureCallback);
  8. }, failureCallback);
  10. // Promise 是一个构造函数，自己身上有all、reject、resolve 这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。
  11. // 既然是构造函数，那就可以用new关键字生成实例，
  12. // 而该构造函数接受一个参数，是函数，并且有两个参数，分别是resolve和reject。
  13. // 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
  14. // 实例生成后，可以用then方法分别指定res和rej回调函数。
  15. let q = new Promise(function(resolve , reject){
  16.     // 异步任务
  17.     setTimeout(() => {
  18.         // 异步任务成功
  19.         resolve('成功的数据');
  20.         // 异步任务失败
  21.         // reject('失败的数据');
  22.     }, 1000);
  23. })
  25. //q是promise的对象
  26. q.then((res) => {
  27.     //兑现承诺，执行这个函数
  28.     console.log(res);
  29. }).catch((err) => {
  30.     //拒绝承诺，执行这个函数
  31.     console.log(err);
  32. })
复制代码
2. Promise的生命周期


状态描述pending初始状态，既不是乐成也不是失败fulfilled操纵乐成完成rejected操纵失败
  1. pending -> fulfilled
  2. pending -> rejected
复制代码
3. 链式调用

Promise 链的特点：

  1. let q = new Promise(function(resolve , reject) {
  2.     ...
  3. })
  5. q.then(res => {
  6.     return pajax({})
  7. }).then(res => {
  8.     return pajax({})
  9. }).catch(err => {
  10.     console.log(...)
  11. })
复制代码
4.Promise静态方法

方法描述Promise.all(iterable)全部乐成时返回效果数组，任何一个失败立即拒绝Promise.allSettled(iterable)全部 Promise 完成后返回效果数组（ES2020）Promise.race(iterable)采用第一个完成（乐成/失败）的 Promise 效果Promise.any(iterable)采用第一个乐成的 Promise 效果（ES2021）Promise.resolve(value)返回已解决的 PromisePromise.reject(reason)返回已拒绝的 Promise 示例：Promise.all
  1. const promises = [
  2.   fetch('/api/data1'),
  3.   fetch('/api/data2'),
  4.   fetch('/api/data3')
  5. ];
  7. Promise.all(promises)
  8.   .then(results => {
  9.     // results 是按顺序的结果数组
  10.   })
  11.   .catch(error => {
  12.     // 任一请求失败立即进入此处
  13.   });
复制代码
5.Promise 与 async/await


例子：
  1. // Promise 链式调用
  2. function getData() {
  3.   return fetchData()
  4.     .then(data => processData(data))
  5.     .then(result => saveResult(result))
  6.     .catch(handleError);
  7. }
  9. // async/await 版本
  10. async function getData() {
  11.   try {
  12.     const data = await fetchData();
  13.     const processed = await processData(data);
  14.     return await saveResult(processed);
  15.   } catch (error) {
  16.     handleError(error);
  17.   }
  18. }
复制代码
6. Fetch


6-1 根本使用方法


6-2 响应对象属性

  1. fetch(url).then(response => {
  2.   console.log(response.status);    // HTTP 状态码
  3.   console.log(response.statusText); // 状态文本
  4.   console.log(response.headers);   // 响应头
  5.   console.log(response.ok);        // 状态码 200-299 时为 true
  6. });
复制代码
6-3 解析不同格式的响应

  1. // JSON
  2. response.json()
  4. // 文本
  5. response.text()
  7. // Blob（二进制数据）
  8. response.blob()
  10. // FormData
  11. response.formData()
  13. // ArrayBuffer
  14. response.arrayBuffer()
复制代码
6-4 网络错误处理

  1. fetch(url)
  2.   .then(res => {
  3.     if (res.ok) {
  4.               //这里拿不到本来的数据，要先返回json数据，然后到下一个then才能拿到数据，返回的是状态码
  5.             return res.json();
  6.     } else {
  7.         //拒绝请求
  8.         return Promise.reject({
  9.             status : res.status ,
  10.             statusText : res.statusText
  11.         })
  12.     }
  13.   })
  14.   .then(res => {
  15.     //这里才可以拿到数据
  16.     console.log(res)
  17.   })
  18.   .catch(error => {
  19.     console.error('Fetch error:', error);
  20.   });
复制代码
7. jsonp



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4