用Promise改写传统异步方法回调函数及多个请求并发等待返回

前言

上周做了一个需求，其实很简单，但也不是那么理所当然的简单。

根据后台返回的数据，在高德地图上把数据中的点根据经纬度都标注出来。

这个过程中遇到了两个问题：

1. 数据量很大，测试数据10000条以上，单次展示。（先不要纠结着10000个点在地图上能不能展示的清楚。）
2. 数据并不是全的，测试数据中都没有经纬度，只提供了点所在区域的adcode，这里调用高德的DistrictSearch来返回该区域中心点的经纬度。（这里后期其实做了缓存，不再每次都去获取了。但是这里假设依然需要每次都异步的去获取数据。）

高德的DistrictSearch是一个异步的回调方法，所以也就引出来接下来要描述的问题。

callback function

说两个典型的用到回调函数的场景：

const arr = [1,2,3]
arr.forEach(value => value + 1);

Array.prototype.forEach里面的就是一个callback function啊，只是，它是同步的。如果你不想用这个，比如想在forEach中提前中断掉循环，大可以用forof、forin……各种的for循环来替代。

$.ajax('yourUrl', response => {
    // do whatever you want here
})

其实不用jQuery很久了，这里举这个例子，只是因为它够典型，也遇到的最多。一个异步的回调函数，这里的回调似乎无法避免，因为说实话你也不能控制它什么时候执行不是？

问题：

所以有些逻辑我要等请求数据返回了之后再做该怎么办呢？

答案：

So easy, 放在回调函数callback里面嘛！

结果：

asyncFuncion1(function() {
  asyncFuncion2(function() {
    asyncFuncion3(function() {
      asyncFuncion4(function() {
        //...infinite
      });
    });
  });
});

That's cool, no problem?

Of course not!!! 这就是传说中的“回调金字塔”或“回调黑洞”。

前言中的问题，用callback来解

首先，看一下第一版代码：

// step 1: get all marker first
for (const element of data) {
  for (const value of element.details) {
    // if neither longitude nor latitude, get them from adminAreaCode
    let { longitude, latitude } = value;
    const { adminAreaCode } = value;
    if ((!longitude || !latitude) && adminAreaCode) {
      const districtSearch = new IMAP.DistrictSearch();

      districtSearch.search(adminAreaCode, (status, result) => {
        // return status is string 0, WTF!!!!!!
        if (status === '0') {
          const paths = result.results;

          const resultPath = paths[0];

          const { center: { lng, lat } } = resultPath;
          if (lng && lat) {
            addMarker(longitude, latitude);
          }
        } else {
          // return error
        }
      });
    } else if (longitude && latitude) {
      addMarker(longitude, latitude);
    }
  }
}

// step 2: mark the marker on the map
// .......

看到这里，先思考下上面的代码能不能满足需求呢？

这样写明显是有问题的：

首先，地图不太可能取回来了一个点就标记一次，所以step 2里面的代码是没办法写到每一次执行的回调里面去的。

所以这里就要等待所有的异步执行完毕，那么如何等待呢？

设置一个全局变量，然后setInterval轮询？或者在每次异步方法的回调函数里面去判断？

来看看修改后的代码，我似乎并没这么写过，为了说明这个问题写了下：

// step 1: get all marker first
for (const element of data) {
  for (const value of element.details) {
    // if neither longitude nor latitude, get them from adminAreaCode
    let { longitude, latitude } = value;
    const { adminAreaCode } = value;
    if ((!longitude || !latitude) && adminAreaCode) {
      const districtSearch = new IMAP.DistrictSearch();

      // callbackCount plus 1 when async callback function runs
      callbackCount = callbackCount + 1;

      districtSearch.search(adminAreaCode, (status, result) => {
        // callbackFinishCount plus 1 when async callback function returns        
        callbackFinishCount = callbackFinishCount + 1;
        if (callbackCount === callbackFinishCount) {
            // step 2: mark the marker on the map
            // .......
        }

        // return status is string 0, WTF!!!!!!
        if (status === '0') {
          const paths = result.results;

          const resultPath = paths[0];

          const { center: { lng, lat } } = resultPath;
          if (lng && lat) {
            addMarker(longitude, latitude);
          }
        } else {
          // return error
        }
      });
    } else if (longitude && latitude) {
      addMarker(longitude, latitude);
    }
  }
}

写这代码的我？过来，保证不打死我。。。

把callback function 改写成Promise

刚刚的“回调金字塔”能不能解？ Promise是一个很好的选择。第一步，用Promise重写刚刚的callback函数：

const searchPromise = new Promise((resolve, reject) => {
  districtSearch.search(adminAreaCode, (status, result) => {
    // return status is string 0, WTF!!!!!!
    if (status === '0') {
      const paths = result.results;

      const resultPath = paths[0];

      const { center } = resultPath;
      resolve(center);
    } else {
      reject(result);
    }
  });
});

searchPromise就是通过new Promise创建的Promise对象，到这里，我们就有了一个处于pending状态的Promise对象。

Promise & async await

这一个部分，首先强烈推荐ES7语法中的async & await，这两个方法出现，极大的简化了Promise的写法，当然依然可以选择Promise.resolve或者Promise.then来写。开心就好啦。async & await，以后有空会来详细介绍的，这里可以跟着链接了解下先。

兼容性？babel已经支持，不要犹豫，赶紧尝试使用这项新特性吧。

定义好searchPromise之后就是调用它了：

getMarkers = async (data = []) => {
  const markers = [];

  const opts = new IMAP.MarkerOptions();

  const addMarker = (longitude, latitude) => {
    const lnglat = new IMAP.LngLat(longitude, latitude);
    const marker = new IMAP.Marker(lnglat, opts);
    markers.push(marker);
  };

  for (const element of data) {
    for (const value of element.details) {
      // if no longitude nor latitude, get them from adminAreaCode
      let { longitude, latitude } = value;
      const { adminAreaCode } = value;
      if ((!longitude || !latitude) && adminAreaCode) {
        const districtSearch = new IMAP.DistrictSearch();

        const searchPromise = new Promise((resolve, reject) => {
          districtSearch.search(adminAreaCode, (status, result) => {
            // return status is string 0, WTF!!!!!!
            if (status === '0') {
              const paths = result.results;

              const resultPath = paths[0];

              const { center } = resultPath;
              resolve(center);
            } else {
              reject(result);
            }
          });
        });
        const { lng, lat } = await Promise.resolve(searchPromise);
        longitude = lng;
        latitude = lat;
      }
      if (longitude && latitude) {
        addMarker(longitude, latitude);
      }
    }
  }
  return markers;
};

写法一下子就简单了。async function，和同步方法无异的写法。注意下async和await的用法。

但是这个依然是有问题的，因为，每一次的请求都等待着上一次的请求完成，回到开始的前言，10000个点依次执行，简直不敢想。

一个优化，Promise.all

本来这篇文章只是想说说回调如何改写成Promise的，结果写的比与集中要多，这里写一个小小的优化吧。

先创建promise对象，然后把这些promise对象放入一个数组，用Promise.all去调用它，这样所有请求就是异步，然后等所有请求返回结果之后再去地图上标点。

getMarkers = async (directoryData = []) => {
  const markers = [];

  const opts = new IMAP.MarkerOptions();

  const addMarker = (longitude, latitude) => {
    const lnglat = new IMAP.LngLat(longitude, latitude);
    const marker = new IMAP.Marker(lnglat, opts);
    markers.push(marker);
  };

  const searchPromises = [];

  for (const element of directoryData) {
    for (const value of element.behaviorDetails) {
      // if no longitude nor latitude, get them from adminAreaCode
      const { longitude, latitude } = value;
      const { adminAreaCode } = value;
      if ((!longitude || !latitude) && adminAreaCode) {
        const districtSearch = new IMAP.DistrictSearch();

        const searchPromise = new Promise((resolve, reject) => {
          districtSearch.search(adminAreaCode, (status, result) => {
            // return status is string 0, WTF!!!!!!
            if (status === '0') {
              const paths = result.results;

              const resultPath = paths[0];

              const { center } = resultPath;
              resolve(center);
            } else {
              reject(result);
            }
          });
        });
        searchPromises.push(searchPromise);
      } else if (longitude && latitude) {
        addMarker(longitude, latitude);
      }
    }
  }

  const results = await Promise.all(searchPromises);
  for (const result of results) {
    const { lng, lat } = result;
    addMarker(lng, lat);
  }

  return markers;
};

Next

异步方法其实还能用Generator函数来写，这里就不废话了，下次写一篇专门的文章来介绍吧。