es6 之 generator(3)

generator 应用实例

generator与promise应用实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="runner.js"></script>
    <script>
        runner(function*() {
            let ajaxData = yield $.ajax({
                url: './ajax.json',
                dataType: 'json'
            });
            console.log(ajaxData);
            let ajaxData2 = yield $.ajax({
                url: './all.json',
                dataType: 'json'
            });
            console.log(ajaxData2)
        })
    </script>
</html>

runner.js代码如下

function runner(_gen){
  return new Promise((resolve, reject)=>{
    var gen=_gen();

    _next();
    function _next(_last_res){
      var res=gen.next(_last_res);

      if(!res.done){
        var obj=res.value;

        if(obj instanceof Promise){
          obj.then((res)=>{
            _next(res);
          }, (err)=>{
            reject(err);
          });
        }else if(typeof obj=='function'){
          if(obj.constructor.toString().startsWith('function GeneratorFunction()')){
            runner(obj).then(res=>_next(res), reject);
          }else{
            _next(obj());
          }
        }else{
          _next(obj);
        }
      }else{
        resolve(res.value);
      }
    }
  });
};

我们可以使用同步的方式来处理异步的请求，非常的实用方便，但是可以看到我们使用时需要引入一个文件，有些许的不方便，所以官方就有了 async await 使用方法如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        async function ajaxAsync() {
            let ajaxData = await $.ajax({
                url: './ajax.json',
                dataType: 'json'
            });
            console.log(ajaxData);
            let ajaxData2 = await $.ajax({
                url: './all.json',
                dataType: 'json'
            });
            console.log(ajaxData2)
        }
        ajaxAsync();
    </script>
</html>

小提示：generator此时使用时是不能用箭头函数的，但是用async时是可以使用的

generator 应用实例

generator与promise应用实例

runner.js代码如下

我们可以使用同步的方式来处理异步的请求，非常的实用方便，但是可以看到我们使用时需要引入一个文件，有些许的不方便 ，所以官方就有了 async await 使用方法如下

猜你喜欢

我们可以使用同步的方式来处理异步的请求，非常的实用方便，但是可以看到我们使用时需要引入一个文件，有些许的不方便，所以官方就有了 async await 使用方法如下