es6异步

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 8.8k | 阅读时长 ≈ 8 分钟

1、promise-解决异步操作

同步——串行 简单、方便

异步——并发 性能高、体验好

jQuery异步问题：回到地狱

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
$.ajax({
  url: '/banner_data',
  success(banners){
    $.ajax({
      url: '/user_data',
      success(user){
        $.ajax({
          url: '/item_data',
          success(items){
            $.ajax({
              url: '/news_data',
              success(news){

              },
              error(){
                alert('数据获取失败');
              }
            })
          },
          error(){
            alert('数据获取失败');
          }
        })
      },
      error(){
        alert('数据获取失败');
      }
    })
  },
  error(){
    alert('数据获取失败');
  }
})

使用Promise

Promise.all() 与：所有的都成功

Promise.race() 或：只要有一个完成

1
2
3
4
5
6
7
8
9
//Promise
Promise.all([
  $.ajax('/banner_data'),
  $.ajax('/item_data'),
  $.ajax('/user_data'),
  $.ajax('/news_data'),
]).then(arr=>{
  let [banners, items, user, news]=arr;
}, ()=>{})

1.txt

1
{"a": 3, "b": 5}

2.txt

1
[12,5,8,3]

3.txt

1
{"name": "blue", "age": 18}

promise怎么用.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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery.js" charset="utf-8"></script>
  <script>
    let p = new Promise((resolve, reject) => {
      //resolve       解决->成功
      //reject        拒绝->失败
      $.ajax({
        url: '1.txt',
        dataType: 'json',
        success(json) {
          resolve(json)
        },
        error(err) {
          reject(err)
        }
      })
    })

    debugger
    p.then(json => {
      alert('成功')
      console.log(json)
    }, err => {
      alert('失败')
    })
  </script>
</head>

<body>

</body>

</html>

promise怎么用2.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery.js" charset="utf-8"></script>
  <script>
    let p = new Promise((resolve, reject) => {
      //resolve       解决->成功
      //reject        拒绝->失败
      $.ajax({
        url: '1.txt',
        dataType: 'json',
        success(json) {
          resolve(json)
        },
        error(err) {
          reject(err)
        }
      })
    })

    let p2 = new Promise((resolve, reject) => {
      //resolve       解决->成功
      //reject        拒绝->失败
      $.ajax({
        url: '2.txt',
        dataType: 'json',
        success(json) {
          resolve(json)
        },
        error(err) {
          reject(err)
        }
      });
    });

    let p3 = new Promise((resolve, reject) => {
      //resolve       解决->成功
      //reject        拒绝->失败
      $.ajax({
        url: '3.txt',
        dataType: 'json',
        success(json) {
          resolve(json)
        },
        error(err) {
          reject(err)
        }
      })
    })

    Promise.all([p, p2, p3]).then(arr => {
      let [j1, a, j2] = arr;

      alert('成功')
      console.log(j1, a, j2)
    }, err => {
      alert('失败')
    })
  </script>
</head>

<body>

</body>

</html>

promise怎么用3.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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery.js" charset="utf-8"></script>
    <script>
    $.ajax({
      url: '1.txt',
      dataType: 'json'
    }).then(json=>{
      alert('成了');
    }, err=>{
      alert('错了');
    });

    debugger

    /*
    Promise.all([p, p2, p3]).then(arr=>{
      let [j1, a, j2]=arr;

      alert('成功');
      console.log(j1, a, j2);
    }, err=>{
      alert('失败');
    });
    */
    </script>
  </head>
  <body>

  </body>
</html>

promise怎么用4.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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery.js" charset="utf-8"></script>
    <script>
    Promise.all([
      $.ajax({url: '1.txt', dataType: 'json'}),
      $.ajax({url: '2.txt', dataType: 'json'}),
      $.ajax({url: '3.txt', dataType: 'json'}),
    ]).then(arr=>{
      let [j1, a, j2]=arr;

      console.log(j1, a, j2);
    }, err=>{
      alert('失败');
    });
    </script>
  </head>
  <body>

  </body>
</html>

结论

  • Proimse有用——解除异步操作
  • Promise有局限——带逻辑的异步操作麻烦

2、generator-生成器（过渡）

可以暂停

generator函数.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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script>
    function* show() {
      alert('aaa')

      yield

      alert('bbb')
    }

    let gen = show()

    gen.next() //aaa

    setTimeout(function() {
      gen.next() //bbb
    }, 5000)
  </script>
</head>

<body>

</body>

</html>

generator函数3.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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    function *show(){
      alert('aaa');

      let a=yield;

      alert('bbb'+a);
    }

    let gen=show();

    gen.next();

    gen.next(12);
    </script>
  </head>
  <body>

  </body>
</html>

generator函数4.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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script>
    function* show() {
      alert('aaa')

      yield 55

      alert('bbb')

      return 89
    }

    let gen = show()

    let res1 = gen.next()
    // debugger
    console.log(res1) //{value: 55, done: false}

    let res2 = gen.next()
    console.log(res2) //{value: 89, done: true}
  </script>
</head>

<body>

</body>

</html>

3、async/await（推荐，es7）

可以暂停且可以处理带业务逻辑、异常

async和await.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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script>
    function sleep(sec) {
      return new Promise((resolve, reject) => {
        setTimeout(function() {
          resolve()
        }, sec * 1000)
      })
    }

    async function show() {
      alert('a')

      await sleep(1)

      alert('b')

      await sleep(2)

      alert('c')
    }

    show()
  </script>
</head>

<body>

</body>

</html>

处理带业务逻辑

async和await2.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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery.js" charset="utf-8"></script>
  <script>
    (async () => {
      let data1 = await $.ajax({
        url: '1.txt',
        dataType: 'json'
      })
      console.log('data1=========>', data1)

      if (data1.a + data1.b < 10) {
        let data2 = await $.ajax({
          url: '2.txt',
          dataType: 'json'
        })

        alert(data2[0])
      } else {
        let data3 = await $.ajax({
          url: '3.txt',
          dataType: 'json'
        })

        alert(data3.name)
      }
    })()
  </script>
</head>

<body>

</body>

</html>

处理异常

async和await3.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
41
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery.js" charset="utf-8"></script>
  <script>
    async function show() {
      try {
        let data1 = await $.ajax({
          url: '1.txt',
          dataType: 'json'
        })

        let data2 = await $.ajax({
          url: '33.txt',
          dataType: 'json'
        })

        let data3 = await $.ajax({
          url: '3.txt',
          dataType: 'json'
        })

        console.log(data1, data2, data3)
      } catch (e) {
        alert('有问题')

        throw new Error('我错了....')
      }
    }

    show()
  </script>
</head>

<body>
</body>

</html>