es6:promise

异步任务，请求服务器数据：

function getJSON(url){console.log("hshhslsjhf");
    return new Promise( (resolve,reject) =>{
        const request = new XMLHttpRequest();
        request.open("GET",url);
        request.onload =function(){
            try {
                if(this.status === 200){console.log("hehe,200");
                    resolve(JSON.parse(this.response));
                }else{console.log("nope");
                    reject(this.status+"  "+this.stausText);
                }
            }catch(e){console.log("nope1");
                reject(e.message);
            }}
            
            request.onerror = function(){console.log("nope2");
                reject(this.status+"  "+this.stausText);
            };
            request.send();
        });}

传入请求地址，调用

getJSON("https://lxqjss.github.io/data/road_20181102.geojson").then( data => {console.log(data.features.length)},err => {console.log(err)} )

调用结果

image.png

等待多个promise：
Promise.all(promiseArr).then(function(data){}).catch(function(err){})

Promise.all([getJSON("https://lxqjss.github.io/data/road_20181102.geojson"),getJSON("https://lxqjss.github.io/data/jiangganoutline.geojson")]).then( data => {console.log(data[0].features.length);console.log(data[1].features.length);})

image.png

多个promise竞赛:Promise.race(promiseArr).then(function(data){}).catch(function(err){})
（场景：我们希望给第一个完成请求的数据做些什么操作)

Promise.race([getJSON("https://lxqjss.github.io/data/road_20181102.geojson"),getJSON("https://lxqjss.github.io/data/jiangganoutline.geojson")]).then( data => {console.log(data);})

运行结果，打印出来看到是第二个promise先请求完成。

image.png