git-es6-promisem面试

git

工作区 暂存区 仓库区

git config --global user.name 'xxx'
git config --global user.email 'xxx'

验证是否配置成功

1. 输入命令： git config --list
2. 在 c:/用户/用户名 下有 .gitconfig文件，存放的就是git配置的用户信息

新项目git管理步骤

• 初始化 git init 一个项目只需要初始化一次
• 编写代码----工作区
• 提交到暂存区 git add .
• 提交到仓库区，生成一个版本 git commit -m 版本描述
• git status 查看文件的状态

.Git命令

init 初始化

git  init

add 提交到暂存区

git add  .   把项目目录下所有文件都提交到暂存区
git  add 文件名  把指定的文件提交到暂存区

commit 提交到仓库区

• 每提交一次，就生成一个版本

git  commit -m  版本描述

status 查看状态

• 绿色表示文件上传到暂存区 红色文件在工作区
• nothing to commit, working tree clean 表示工作区是空的，所有文件都已提交到仓库区

git  status

log 查看版本号

git log    版本详细信息
git  log  --oneline  简洁的版本信息

reset --hard 切换版本

git  reset  --hard  版本号

reflog 查看所有版本号

git reflog

文件忽略

(1)介绍：

对于无需使用git进行管理的文件或文件夹使用此文件进行配置

(2)使用步骤

• 在项目文件夹下创建文件 .gitignore
• 在该文件里配置信息

(3)常用配置规则：

• /git-demo1/ 过滤整个文件夹
• *.txt 过滤所有.txt文件
• /git-demo1/a.html 过滤某个具体文件

分支相关命令

branch 查看所有分支

git branch  

branch 分支名 创建分支

git branch 分支名

checkout 切换分支

git checkout 分支名

merge 合并分支

git merge 分支名

项目使用分支的步骤

• 新的项目需要初始化 git init
• 提交到暂存区
• 提交到仓库区，生成第一个版本，生成master主分支
• 根据需要创建其他分支 git branch 分支名
• 切换分支 git checkout 分支名hong
• 写代码
• 提交到暂存区
• 提交到仓库区
• 切换到主分支 master, hong分支写的代码没有
• 把hong分支的代码合并到master git merge hong

推送到远程仓库

• 第一种

git  push  远程仓库地址  分支名

• 第二种

起别名：  git  remote add  别名 远程仓库地址
查看是否起成功：  git  remote -v
提交 ：   git  push  别名  分支名

• 第三种

git push -u  别名/远程仓库地址  分支名

-u  可以记录本次的远程仓库地址和分支名，后期再提交时只需要 git  push即可

克隆和同步远程仓库

• 电脑上没有远程仓库内容，需要克隆下来

  git clone 远程仓库地址
  

• 如果电脑上有该项目，需要更新
  • 在项目目录下打开git , 输入git pull命令

总结

remote add 添加 远程仓库别名

git  remote  add  别名  远程仓库地址

remote -v 查看别名

git  remote -v

remote rm 删除别名

git remote rm  别名

push 提交到远程仓库

git push  远程仓库地址  分支名

git push  别名  分支名

git push  -u  别名  分支名
后边的提交只需要  git push  即可

clone 下载一个新的项目到本地

git  clone 远程仓库地址

pull 更新本地的项目

git  pull

工作区 暂存区 仓库区

git init 初始化 git add . 上传到暂存区 git commit -m 上传到仓库区

git log 查看版本信息 git log --online 简洁的版本信息

git reset --hard banbenhao切换版本号

git reflog 查看所有版本信息

分支

git branch查看分支

git branch 分支名 创建分支

git checkout 分支名 切换分支

git merge 分支名 合并分支

推送到远程仓库

git push 远程仓库地址 分支名

起别名

git remote add 别名 仓库地址

git remote -v 查看别名 git remote rm 别名 删除别名 git push 别名 分支名 用别名提交

git push -u 别名/远程仓库地址 分支名

-u 记录本次的远程仓库地址和分支名 后期只要git push

es6

let和const

ES6 新增了let命令，用来声明变量。

ES6新增了const命令用来声明一个只读的常量。

1.let命令

(1) 基础用法

• 和var语法一样

let 变量名;
let 变量名 = 值；
let 变量名，变量名；

(2) let 特点

• 不存在变量提升，必须先声明后使用
• 块级作用域
• 同一作用域不能重复声明
• 暂时性死区

代码案例：

 // 1、 let 块级作用域   var 函数作用域
        let a = 10; //全局

        if (true) {
            let b = 20; //局部
        }

        // console.log(b) // b is not defined

        for (let i = 0; i < 3; i++) {
            let c = 30//局部
        }


        function fn() {
            let d = 40;//局部
        }
        fn()
        {
            let e = 50; {
                console.log(e)
            }
        }
        // console.log(e)


        // 2.var 可重复声明  let 同一作用域不能重复声明
        let aa = 10;
        // let aa = 'apple';  //Identifier 'aa' has already been declared

        {
            let aa = 'apple'
        }


        // 3.var有声明提升，let 没有，必须先声明后使用
        // console.log(aaa) //Cannot access 'aaa' before initialization
        let aaa = 100;


        // 4.暂时性死区
        let bbb = 200; 
        {
            console.log(bbb)  //Cannot access 'bbb' before initialization
            let bbb = 'banana';
        }

☆(3) let和循环

代码案例：

        // es5 实现 点哪个就获取相对应下标
        var btn = document.querySelectorAll('button');
        /*for (var i = 0; i < btn.length; i++) {
            //   function fn(a) {
            //      btn[a].onclick = function() {
            //          console.log(a)
            //      }
            //  }
            //  fn(i) 
            
            (function(a) {
                btn[a].onclick = function() {
                    console.log(a)
                }
            })(i)
        }*/

        // es6 
        for (let i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                console.log(i)
            }
        }

2.const命令

• 用来声明常量

(1) 基础用法

• 一般起常量名用大写

(2)const特点

• 一旦声明必须赋值
• 常量的值不能修改，引用类型除外
• 块级作用域，没有声明提升，不能重复声明，有暂时性死区

代码案例：

  // 1.常量后期基本数据类型不能修改,但是复杂数据类型可以修改
        const A = 'apple';
        // A = '苹果'
        console.log(A)

        const ARR = [10, 20, 30];
        ARR[0] = 100;
        console.log(ARR)


        // 2.常量声明必须赋值
        // const B; //Missing initializer in const declaration
        // console.log(B)


        // 3.块级作用域
        {
            const C = 30;
            console.log(C)
        }
        // console.log(C) //C is not defined


        // 4.没有声明提升
        // console.log(D) //Cannot access 'D' before initialization
        const D = 10;
        // 5.同一作用域不能重复声明
        // const D = 100; 

        // 6.暂时性死区
        {
            // console.log(D) //: Cannot access 'D' before initialization
            const D = 100;
        }

数据类型和数据结构：

数据类型：字符串 数组 对象 Symbol

数据结构：Set Map

1. 字符串

★(1) 模板字符串

基础用法

• 用反引号括起来，中间的变量用${变量名}

代码案例：

// es5  字符串拼接
        let name = '夏明';
        let age = 30;
        console.log('我叫' + name + '，今年' + age + '岁');

        // es6 模板字符串
        console.log(`我叫${name},今年${age}岁`)

        // 表达式
        console.log(`我叫${name},今年${age+1}岁`)
        console.log(`4<5 是 ${4<5?'真':'假'}`)


        // 对象属性
        let obj = {
            sex: '男'
        }

        console.log(`我是${obj.sex}`)

        // 函数调用
        function fn() {
            return 'hahha'
        }
        console.log(`我是函数结果: ${fn()}`)

优点

• 相对于es5字符串拼接比较简洁，用反引号`表示，里面的变量用${}包起来就可以实现
• 模板字符串可换行
• ${}中嵌入的内容可以写js语句

★(2) 新增方法

• startsWith

语法：字符串.startsWith( 参数字符 )

描述：参数字符串是否在原字符串的头部

• endsWith

语法：字符串.endsWith( 参数字符 )

描述：参数字符串是否在原字符串的尾部

• repeat

语法：字符串.repeat( num )

描述：返回一个新字符串，表示将原字符串重复n次

• padStart

语法：字符串.padStart( 目标长度，填充的字符 )

描述：字符串头部补全

• padEnd

语法：字符串.padEnd( 目标长度，填充的字符 )

描述：字符串尾部补全

代码案例：

       let str = '/login?username=张三';
        // 判断某个字符串是否以**开头
        console.log(str.startsWith('/index'));

        // 是否以***结尾
        let str1 = './img/1.jpg';
        console.log(str1.endsWith('.png'))

        // 字符串重复n次
        console.log(str1.repeat(3))


        let str2 = '5';
        // 字符串头部补全
        console.log(str2.padStart(2, '0'))
        // 字符串尾部补全
        console.log(str2.padEnd(2, '1'))

2. 数组

新增方法

• Array.of

语法：Array.of( …args )

作用：实例化数组

• Array.from

语法：Array.from( arrayLike )

作用：把伪数组转换成数组

• find

语法： 数组.find((item,index,arr)=>{return 条件})

作用：返回的是第一个符合条件的值

• findIndex

语法： 数组.findIndex((item,index,arr)=>{return 条件})

作用：返回的是第一个符合条件的下标索引

• includes

语法：数组.includes(某个元素)

作用：判断某个元素是否存在，存在返回true，不存在返回false

 // es5 
        let arr = new Array(10, 20, 30);
        console.log(arr)
        let arr1 = new Array(5);
        console.log(arr1)

        // es6  实例化数组
        let arr2 = Array.of(10, 20, 30);
        console.log(arr2)
        let arr3 = Array.of(10);
        console.log(arr3)

        // 伪数组转数组
        let obj = {
            '0': 'haha',
            '1': 'heihei',
            'length': 2
        }
        let arr4 = Array.from(obj)
        console.log(Array.isArray(arr4))

        let btn = document.querySelectorAll('button');
        console.log(Array.isArray(btn))
        console.log(Array.from(btn))

        // 查找符合条件的第一个值,没有符合条件的返回undefined
        let arr5 = [10, 20, 30];

        let s = arr5.find(function(item, index, arr) {
            // console.log(index, item, arr)
            return item > 150
        })
        console.log(s)


        // 查找符合条件的第一个值的下标,没有符合条件的返回 -1
        let s1 = arr5.findIndex(function(item, index, arr) {
            // console.log(item, index, arr)
            return item > 200
        })
        console.log(s1)


        // 判断某个数组是否包含某项
        let arr6 = ['apple', 'haha', 'heihie'];
        console.log(arr6.includes('hello'))

        let str = 'hello,world';
        console.log(str.includes('orr'))

★3. 对象

对象（object）是 JavaScript 最重要的数据类型。ES6 对它进行了重大升级，包括（数据结构本身的改变和Object对象的新增方法）

(1) 对象属性和方法简写

• 对象属性名和属性值的变量名一致，可省写
• 方法可省略冒号和function

代码案例：

 // es6简写
        let obj1 = {
            name,
            age: 30,
            eat() {
                console.log('吃吃吃')
            }
        }

        console.log(obj, obj1)
        obj.eat();
        obj1.eat();

(2) 属性名表达式

• 可以是变量，字符串，数字，表达式

代码案例：

 // 属性名表达式
        let a = 'apple';
        let obj2 = {
            [a]: 10,
            [2 + 5]: '运算',
            [3 > 4 ? 'haha' : 'hiehie']: '三木',
            10: 'haha'
        }
        console.log(obj2.apple)
        console.log(obj2[a])
        console.log(obj2['apple'])
        console.log(obj2[7]) //属性名是数字时获取不能以点的形式获取

(3) 新增方法

• Object.assign

语法： Object.assign( target,source1,source2,… )

描述：对象的合并( 浅拷贝 )，将源对象（source），复制到目标对象 ( target )

• Object.keys

语法：Object.keys( object )

描述：返回一个数组，成员是参数对象自身的属性的键名

• Object.values

语法：Object.values( object )

描述：返回一个数组，成员是参数对象自身的属性的键值

• JSON.parse

语法：JSON.parse( jsonstr)

描述：把json字符串转换成js对象

• JSON.stringify

语法：JSON.stringify( object )

描述：把js对象转换成json字符串

• json的两个方法实现深拷贝

let obj = {
            name: '张三',
            age: 18
        }

        let obj1 = {
            sex: '男',
            address: '北京',
            score: [10, 20, 30]
        }

        // 对象合并
         let s = Object.assign(obj, obj1);
         console.log(s, obj)

        // 对象浅拷贝
        let newobj = Object.assign({}, obj, obj1);
        obj1.score[0] = 100;
        obj1.sex = '女';
        console.log(newobj, obj1)


        // 获取对象属性名的集合
        console.log(Object.keys(obj1)) //['sex', 'address', 'score']

        // 获取对象属性值的集合
        console.log(Object.values(obj1)) //['女', '北京', Array(3)]


        // 对象转字符串
        console.log(JSON.stringify(obj));

        // json字符串转对象
        let str = '{"a":10,"b":20}';
        console.log(JSON.parse(str))

        // 深拷贝
        let obj2 = JSON.parse(JSON.stringify(obj1));
        obj2.score[1] = 200;
        console.log(obj1, obj2)

4、Symbol

★ES6 引入了一种新的基本数据类型Symbol，表示独一无二的值。

es5基本数据类型：number \ string \ boolean \ null \ undefined \ symbol

es5复杂数据类型：Object(function、array 、 object)

它是 JavaScript 语言的第六种基本数据类型。

Symbol 值通过Symbol函数生成。

★(1) 基础用法

代码案例：

        let s = Symbol();
        console.log(typeof s) //symbol

        let s1 = Symbol();
        console.log(s == s1) //false

(2) Symbol描述符

• 描述符可以理解为 symbol的注释，没有任何影响
• 两个symbol的描述符一样，也不会相等

代码案例：

        // 标识符  相当于是  注释
        let s2 = Symbol('name');
        let s3 = Symbol('name');
        console.log(s2 == s3) //false

(3) 应用场景

常用来模拟对象私有属性和方法。

一般常用于框架、js内置函数和对象中

代码案例：

         // 应用 --- 用在对象中作为属性名，防止被覆盖

        //程序员a
        let n = Symbol('name');
        let obj = {
            [n]: '张三',
            age: 30
        }

        // 程序员b
        obj.name = '哈哈';

        console.log(obj)
        console.log(obj.name)

5、Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

★(1) 基本用法

代码案例：

      let s = new Set([10, 20, 10, 10, 2, 3]);
        console.log(s)

(2) 常见方法

• size 获取set集合的长度
• add(值) 给集合添加值，返回新set
• delete(值) 删除某个值，返回布尔值，表示是否删除成功
• has(值) 查询这个值是否时集合的成员，返回布尔值
• clear() 清空集合,没有返回值

代码案例：

 // set数据结构--方法

        // 获取长度
        console.log(s.size)
            // 添加
        s.add('apple');
        console.log(s)
            // 删除
        s.delete(10)
        console.log(s)

        // 判断某项是否存在
        console.log(s.has(10))

        // 清空整个set集合
        s.clear();
        console.log(s)

★（3）使用场景

• 数组去重

 // 应用----数组去重
        let arr = [10, 10, 20, 10, 20, 30, 40, 30];
        let s1 = new Set(arr); // set数据结构将数组中重复项去除
        console.log(Array.from(s1)) // 转数组

6、Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值都可以当作键。

☆(1) 基本用法

代码案例：

let m = new Map([ ['name', 'haha'], [{ a: 10 }, 'heihei'], [ [10, 20], 'hello'] ]);

(2) 常见方法

• size 获取Map的长度
• set(key,val) 添加一条数据
• get(key) 根据key获取val
• has(key) 是否存在key
• delete(key) 删除某条数据
• clear() 清空所有数据

代码案例：

        // 长度
        console.log(m.size)
       // 添加一条
        m.set('age', 20)
        console.log(m)
        // 获取
        console.log(m.get('age'))
        //判断某个键 是否存在
        console.log(m.has('haha'))
        //删除一个
        m.delete('name');
        console.log(m)
        //清空
        m.clear();
        console.log(m)

解构赋值

1.概念及意义

ES6 允许按照一定模式，将数组和对象中值拿出来，赋值给变量，这被称为解构

2.数组解构

2.1 完全解构

• 变量个数和数据个数一致

代码案例：

 let [aa, bb, cc] = [100, 200, 300];
  console.log(aa, bb, cc)

2.2 不完全解构

• 变量个数少，数据个数多

代码案例：

 let [dd, ee] = [10, 20, 30, 40];
 console.log(dd, ee)

2.3 解构失败

• 变量多，数据少

代码案例：

 let [a,b,c] = [10,20]
 // 缺省值
 let [, d, , e] = [10, 20, 30, 40];
 console.log(d, e)

2.4 解构默认值

代码案例：

 // 默认值 , 解构出来的值是undefined时，默认值生效
 let [aaa, bbb = '嘿嘿', ccc = 'haha', ddd = 100, eee = '哈哈'] = [10, 20, null, undefined];
  console.log(aaa, bbb, ccc, ddd, eee) //10 20 null 100 '哈哈'

2.5 数组解构应用(数据交换)

代码案例：

        // 应用 -- 数据交换
        let i = 100;
        let j = 200;

        [i, j] = [j, i]; // let [i,j] = [200,100]
        console.log(i, j)

…运算符

1.rest参数

• 在形参里，…表示剩余参数运算符，后边紧跟形参名
• 剩余参数是一个数组，如果没有传参，默认是空数组
• 注意剩余参数必须放在形参列表的最后边，否则报错

代码案例：

 // es5
        function fn(a,b){
            // 不是数组
            console.log(Array.isArray(arguments))
            // 把所有参数接收
            console.log(a,b,arguments) // 10,20 , [10,20,30,40]
        }
        fn(10,20,30,40)



        // es6  rest参数
        function fn1(...a){
            console.log(a) //[10, 20, 30, 40]
        }
        fn1(10,20,30,40)

        // rest参数必须放到参数列表的最后边，否则报错：Rest parameter must be last formal parameter
        function fn2(a,b,...c){
            console.log(a,b,c) //10 20  [30, 40]
        }
        fn2(10,20,30,40)

2. 扩展运算符(spread)

遍历具有iterator接口的集合(字符串 数组 nodelist set map)

        let arr = [10,20,30];
        let str = 'hello';
        let s = new Set(['haha','heihei'])

        console.log(...arr)
        console.log(...str)
        console.log(...s)

作用：数组合并、伪数组转数组、数组浅拷贝 、对象浅拷贝、对象中使用技巧

    // 数组合并

        let arr1 = [10,20]
        let arr2 = ['haha','hiehie'];
        console.log([...arr1,...arr2])
        
        
        // 伪数组转数组
        let s1 = new Set([10,20,30]);
        console.log([...s1])

        // 数组去重
        console.log([...new Set([10,10,10,20,30,40,20])])

        var btn = document.querySelectorAll('button');
        console.log([...btn])
        
        
        
        // 数组浅拷贝
        let arr3 = [10,20,30,['haha','heihei']];
        let arr4 = [...arr3];
        arr4[0] = 100;
        arr4[3][0] = 'hehe';
        console.log(arr3,arr4)
        
        
        // 对象浅拷贝
        let obj = {
            name:'张三',
            age:20,
            score:[10,20,30]
        }
        let obj1 = {...obj};
        obj1.name = '小花';
        obj1.score[0] = 100;
        console.log(obj,obj1)
        
        // 对象中使用技巧
        let obj2 = {
            a:10,
            b:20
        }

        let obj3 = {
            c:30
        }

        // 对象合并, 后边可直接写键值对，如果前边没有就追加，如果前边已经有属性名，覆盖前边的值
        let obj4 = {...obj2,...obj3,d:40,c:300};
        console.log(obj4)

函数新增

1. 箭头函数基础用法

• 没有参数，小括号不能省略
• 一个参数，小括号可省略
• 多个参数，小括号不能省略
• 有返回值，且只有一句，可省略花括号和return关键词
• 有返回值，返回值有歧义，用小括号括起来

代码案例：

// es6 箭头函数
        // let fn = ()=>{}
        // fn() //调用


        // 传参并只传一个参数，可省略小括号
        let  fn = x =>{
            console.log(x)
        }
        fn(10)


        // 函数体有返回值，并且返回值只是一句,可省略{} 和 return
        /* 
            let fn1 = (x) =>{
                return x+100
            }
        */
        let fn1 = x => x+100 ;
        console.log(fn1(10))

        // 返回值有歧义，省略写时用小括号括起来
        let fn2 = () => ({name:'张三',age:30})
        
        console.log(fn2())      

★2.箭头函数特点

• 箭头函数中this问题
  • 父元素指向谁，箭头函数就指向谁
  • 箭头函数不能改变this指向

     function fn(){
            console.log(this); 
            setTimeout(function(){
                console.log(this)
            },1000)
        }
        // fn() // window  window

        let obj = {name:'张三'};
        // fn.call(obj); //obj window


        // this指向 -- 父作用域this指向谁，箭头函数中的this就指向谁
        function fn1(){
            console.log(this)
            setTimeout(()=>{
                console.log(this)
            },1000)
        }
        // fn1() //window  window
        // fn1.call(obj) // obj obj


        let fn2 =()=>{
            console.log(this)
        }
        // 箭头函数不能直接修改this指向
        fn2.call(obj)

• 箭头函数没有构造器，不能作为构造函数

        function fn3(){}
        console.dir(fn3)

        let fn4 = ()=>{}
        console.dir(fn4)     

• 箭头函数不可以使用argements对象，用剩余参数代替

      let fn5 = (...a) =>{
            // console.log(arguments)
            console.log(a)
        }
        fn5()      

promise与异步

1. 同步

代码从上到下一行一行执行，遇到需要等待的会阻塞代码

2. 异步

代码从上到下一行一行执行, 遇到需要等待的代码放到异步队列，同步执行完再回头执行异步队列中代码

promise

promise简介

​ Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理。ES6 将其写进了语言标准，统一了用法。

​ 简单说Promise就是一个容器，里面保存着异步操作的结果。Promise 提供统一的 API，各种异步操作都可以用同步的方法进行处理。

​ 作用：Promise代表了未来某个将要发生的事件(通常是一个异步操作) 有了Promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数。

语法：

基本语法：

• then 接收成功信息
• catch 接收失败信息

代码案例：

        // 同步操作，一旦创建，立即执行
        let p = new Promise((resolve,reject)=>{
            // resolve 返回成功结果   reject 返回失败结果
            // console.log('3333')
            resolve('成功')
            // reject('失败')
        })
        
        // console.log(p)  //rejected 已失败  fulfilled已成功 pending 进行中

        // 接收成功结果  异步
        console.log('1111')
        p.then((res)=>{
            console.log(res)
        })
        console.log('222')


        // catch 接收失败结果  异步操作
       /*  console.log('1111')
        p.catch((err)=>{
            console.log(err)
        })
        console.log('2222') */

★4.2 promise状态

• 三种状态：进行中，已成功，已失败
• 状态有两种转换方式： 进行中–》已成功 进行中–》已失败 ， 一旦状态改变，就不会再变
• promise一旦创建立即执行，此时是进行中，是同步任务
• then和catch 方法是异步的
• 一旦调用resolve , 状态将由进行中–》已成功，调用 reject , 状态有进行中—》已失败

async函数

ES2017 标准引入了 async 函数，它是一个关键字，被async修饰的函数称为async函数。

作用：async也是处理异步的，它是对Promise的一种扩展，让异步更加方便，彻底解决回调嵌套

1.async函数基本用法

• 解决异步的回调地狱问题， 将异步转同步
• 如果函数体内有await关键字，则此函数必须加async，否则报错 await is only valid in async functions and the top level bodies of modules
• 被async修饰的函数, 返回的是Promise对象
• 如果await后面是一个promise对象, 会直接接收resolve传回来的结果,不用再调用then方法接收

语法：

// 一般写法
async function name( ){
    let res1 = await promise异步1
    let res2 = await promise异步2
    ...
}

// 箭头函数写法
async ()=>{
   let res1 =  await promise异步1
   let res2 =  await promise异步2
   ...
}
   
// 在对象里面的写法

{
    async fn(){
          let res1 =  await promise异步1
            let res2 =  await promise异步2
             ...
    }
}
   
// 点击函数写法
bnt.onclick = async function(){
      let res1 =  await promise异步1
        let res2 =  await promise异步2
         ...
}

代码案例：

      let p = new Promise((resolve,reject)=>{
            resolve('haha')
            // reject('hehe')
        })

        async function fn(){


           console.log('1111')
           let s = await p; // await后边跟promise  接收成功结果，同步
           console.log(s)
           console.log('222')


        }
        fn();

2. 应用

使用async函数把promise的异步变成真正的同步代码

代码案例：

  /* 
            1.封装： 写一个函数，函数返回promise , promise里存放异步代码，resolve返回异步得到的结果

            2.使用：async函数，await关键词后边跟 上边封装的函数调用
    
        */



         function p(){
            return new Promise((resolve,reject)=>{
                setTimeout(function(){
                    resolve('1')
                },1000)
            }) 
        }

        console.log(p())


        async function fn(){
            let s = await p();
            console.log(s)
            console.log(await p());
            console.log(await p());
        }

        fn()

原生ajax

1. 介绍

1.1 定义

​ Ajax(Asynchronous Javascript And XML) 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

​ 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。

​ 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新。