前言
上周做了一个需求，其实很简单，但也不是那么理所当然的简单。
根据后台返回的数据，在高德地图上把数据中的点根据经纬度都标注出来。
这个过程中遇到了两个问题：
- 数据量很大，测试数据10000条以上，单次展示。（先不要纠结着10000个点在地图上能不能展示的清楚。）
- 数据并不是全的，测试数据中都没有经纬度，只提供了点所在区域的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函数来写，这里就不废话了，下次写一篇专门的文章来介绍吧。
网友评论