用Promise、Generator、Async函数将异步操作同步化

jaysun 发布于2019-08-21 16:22 / 688人阅读

摘要：函数最简单，不需要借助其他的执行器即可按照顺序执行。函数执行过程中遇到就会交出执行权限，等到异步操作完成再进行下面的操作，语句返回的是方法的参数。小程序不支持函数，并且同时间最多支持个请求，所以被迫无奈，只能使用来做异步批量调用。

在日常开发的过程中总会遇到一些下一个请求需要上一个请求的响应数据作为参数（或者坑爹的小程序开发只能同时最多请求5个），那么这个时候我们就需要批量地请求一批后再请求一批。

Async函数

首先来介绍一下Async函数方式，Async函数是ES7添加的，目前babel方面已支持，所以可以大胆使用。Async函数最简单，不需要借助其他的执行器即可按照顺序执行。下面来看个例子。

//  正常情况下，await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。
async function requestList() {
    let res1 = await new Promise((resolve) => {
        setTimeout(() => {
            resolve("ok");
        }, 100);
    });
    let res2 = await new Promise((resolve) => {
        setTimeout(() => {
            resolve("ok2");
        }, 100);
    });
}

var promise = requestList();

Async函数执行过程中遇到await就会交出执行权限，等到异步操作完成再进行下面的操作，await 语句返回的是Promise resolve方法的参数。

Genrator函数

Genrator函数比起Async函数就像是Async函数是Genrator的语法糖，我们来看一下。

function* gen(){
  try {
    let a = yield new Promise();
    let b = yield new Promise();
    let c = yield new Promise();
  } catch (e) {
    console.log("e");
  }
  yield console.log("c");
}

let g = gen();

执行Generator函数不会像Async函数那样自动执行全部异步操作，而是返回一个执行器，这个执行器有next/throw/return三个方法可以让Generator函数里动起来。如果我们想要向Async函数那样不用自己next next next无止境地调用，那么我们需要一个自动执行的方法。

function go(gen) {
  var g = gen();

  next(g.next());

  function next(res) {
    if (res.done) return value;
    res.value.then((data) => {
      next(g.next(data));
    }).catch((err) => {
      console.error(err);
      next(g.throw(err));
    });
  }
}

Promise

小程序不支持Generator函数，并且同时间最多支持5个请求，所以被迫无奈，只能使用Promise来做异步批量调用。
因为实例化一个Promise对象就会马上进行异步操作，所以以下的方式是不行的

let res1 = new Promise();
let res2 = new Promise();
let res3 = new Promise();
let res4 = new Promise();

四个异步操作是同时进行而不是一个接一个进行，现在我们要同步化这些异步操作怎么做呢？

function goPromise(arr) {
  var index = 0;

  run(ajax(arr[index]));

  function run(p) {
    index++;
    p.then((data) => {
      console.log(data);
      if (index < arr.length) {
        run(ajax(arr[index]));
      }
    }).catch((err) => {
      console.error(err);
      if (index < arr.length) {
        run(ajax(arr[index]));
      }
    });
  }
}

很明显就有个弊端，使用promise递归执行异步操作的时候，处理数据的逻辑需要放在递归函数里，就没有Generator函数舒服了，但是有什么办法呢，小程序又不支持Generator函数，又不想引入垫片，就这样做啦。

云服务器 GPU云服务器 jquery_promise异步 python异步化 php 处理异步化同步和异步

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88459.html

[面试专题]JS异步之Promise,Generator,Async

摘要：所以，函数的一个重要实际意义就是用来处理异步操作，改写回调函数。表示在这里等待异步操作返回结果，再继续执行。 JS异步之Promise,Generator,Async Promise 解决的问题:回调地狱 Promise规范: promise有三种状态，等待（pending）、已完成（fulfilled/resolved）、已拒绝（rejected）.Promise的状态只能从...

孙淑建 2019-08-01 17:32 评论0 收藏0
[面试专题]JS异步之Promise,Generator,Async

摘要：所以，函数的一个重要实际意义就是用来处理异步操作，改写回调函数。表示在这里等待异步操作返回结果，再继续执行。 JS异步之Promise,Generator,Async Promise 解决的问题:回调地狱 Promise规范: promise有三种状态，等待（pending）、已完成（fulfilled/resolved）、已拒绝（rejected）.Promise的状态只能从...

klivitamJ 2019-08-20 19:01 评论0 收藏0
[面试专题]JS异步之Promise,Generator,Async

摘要：所以，函数的一个重要实际意义就是用来处理异步操作，改写回调函数。表示在这里等待异步操作返回结果，再继续执行。 JS异步之Promise,Generator,Async Promise 解决的问题:回调地狱 Promise规范: promise有三种状态，等待（pending）、已完成（fulfilled/resolved）、已拒绝（rejected）.Promise的状态只能从...

xioqua 2019-08-29 13:15 评论0 收藏0
【Web全栈课程三】ES6特性介绍（下）

摘要：示例运行函数弹出弹出函数接收参数，返回值。其中，返回一个对象，是的返回值，代表函数是否执行完成。 ES6特性介绍（下） ES6新的标准，新的语法特征：1、变量/赋值2、函数3、数组/json4、字符串5、面向对象6、Promise7、generator8、ES7:async/await 《【Web全栈课程二】ES6特性介绍（上）》见：https://segmentfault.com/a...

wangshijun 2019-08-26 11:57 评论0 收藏0