ES6中的Promise、async、await用法

发表于 | 阅读次数:

ES6中的Promise、async、await用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <title>Promise、async、await</title>
</head>
<body>
<script type="text/javascript">

//promise用法(返回异步方法返回的数据,resolve获取数据成功后调用的方法, reject获取数据失败后调用的方法)

//第一种写法
    var p = new Promise((resolve,reject) => {
        //模拟ajax请求异步获取数据
        setTimeout(() => {
            let name = 'lindont';
            resolve(name); //成功调用的函数
            //reject('error'); //失败调用的函数
        },1000);
    });

    p.then((data) => {
        console.log(data);
    });


//第二种写法
    var getData = (resolve,reject) => {
        setTimeout(() => {
            let name = 'HuangHaoXin';
            resolve(name);
        },1000);
    }

    var p2 = new Promise(getData);

    p2.then((data) => {
        console.log(data);
    });

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

//async 和 await (async可以将一个同步的方法改为异步方法, await具有阻塞功能变相把一个异步方法变成同步方法, await必须用在async方法中)

//第一种写法
    var getData2 = async () => {
        console.log(2);
        return 'async data'
    }

    var test = async () => {
        console.log(1);
        var d = await getData2();
        console.log(d);
        console.log(3);
    }

    test(); //结果按顺序输出 1 2 3,说明await等待getData2方法执行完毕再往下执行(即自定义一个异步方法，使用await等待另一个异步方法执行完毕，此时异步方法变相成为了同步)


//第二种写法
    var getData3 = () => {
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                var username = 'good day';
                resolve(username);
            },1000);
        });
    }

    var test2 = async () => {
        var data = await getData3();
        console.log(data);
    }

    test2();


</script>
</body>
</html>

Es6中如何使用splic，delete等数组删除方法

js中的splice方法

splice(index,len,[item]) 注释：该方法会改变原始数组。

splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值

index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空

如：arr = [‘a‘,‘b‘,‘c‘,‘d‘]

删除 —- item不设置

arr.splice(1,1) //[‘a‘,‘c‘,‘d‘] 删除起始下标为1，长度为1的一个值，len设置的1，如果为0，则数组不变

arr.splice(1,2) //[‘a‘,‘d‘] 删除起始下标为1，长度为2的一个值，len设置的2

替换 —- item为替换的值

arr.splice(1,1,‘ttt‘) //[‘a‘,‘ttt‘,‘c‘,‘d‘] 替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1

arr.splice(1,2,‘ttt‘) //[‘a‘,‘ttt‘,‘d‘] 替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1

添加 —- len设置为0，item为添加的值

arr.splice(1,0,‘ttt‘) //[‘a‘,‘ttt‘,‘b‘,‘c‘,‘d‘] 表示在下标为1处添加一项‘ttt’

看来还是splice最方便啦

delete

delete删除掉数组中的元素后，会把该下标出的值置为undefined,数组的长度不会变

如：delete arr[1] //[‘a‘, ,‘c‘,‘d‘] 中间出现两个逗号，数组长度不变，有一项为undefined