es6异步

Posted by 小兵兵 on Friday, January 25, 2019

目录

1、promise-解决异步操作

同步——串行 简单、方便

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

jQuery异步问题:回到地狱

	$.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() 或:只要有一个完成

	//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

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

2.txt

	[12,5,8,3]

3.txt

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

promise怎么用.html

	<!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

	<!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

	<!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

	<!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

	<!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

传参

	<!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

返回值

	<!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

	<!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

	<!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

	<!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>