JavaScript异步操作

1.问题的引出

先来看一段简单的代码：

function delayMsg(id){
    setTimeout(function(){
        return '序号:'+id;
    },2000);
}

function fetchData(){
    var arr = [1,2,3,4]
    var dataList = [];
    arr.forEach(function(id){
        var item = {
            msg:delayMsg(id)
        }
    });
    console.log(dataList);
}
fetchData();

delayMsg是一个异步操作，根据同步 -> 异步 -> 回调的先后顺序，明显打印结果dataList是空数组。
那么如何修改代码以在fetchData函数中获取正确数据呢？

2. 采用CO模块

var co = require('co');
function delayMsg (id){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve('序号：'+id);
        },3000);
    });
}

co(function *fectchData() {
    var dalaList = []
    for(var i=0;i<4;i++){
        var msg = yield delayMsg(i);
        dalaList.push({
            msg:msg
        });
    }        
    console.log(dalaList);
});

3. 采用async

const delayMsg = id =>{
    return new Promise((resolve,reject) => {
        setTimeout(function(){
            resolve('序号：' + id);
        },2000);
    })
}

async function fetchData(){
    var dataList = [];
    var arr = [1,2,3,4];
    for(val of arr){
        var item = {
            msg: await delayMsg(val)
        }
        dataList.push(item);
    }
    console.log(dataList);
}

据说比Promise好，采用ES7语法，使用前需要引入Babel模块

4.参考资料

• 7行代码学会co模块
• Javascript 中的神器——Promise
• 目前最好的 JavaScript 异步方案 async/await