异步处理的方法

如果不了解异步处理的朋友，可能会遇到这样的一个问题:我调用了一个函数，而且我确保它能万无一失地返回一个结果给我(就好像一个函数只有”return ‘hellow world'”一句话一样)，但当我调用它时，却返回了一个”undefined”。那么大概率是遇到异步执行的问题了。

最表面的原因是函数存在同步函数和异步函数的区别。同步函数会在函数内容执行完成后才返回一个结果，而异步函数则是在函数没执行完时便返回一个结果，好让主程序继续运行下去(因此会得到一个”undefined”)。

异步操作的好处便是能提高程序运行效率。在一个多线程的程序里面，主函数和被调用函数被安排在不同的线程中。在调用”被调用函数”后,程序继续向下执行，此时被调用函数在另一个线程中与主程序并行运行，这样效率便大大提高，特别是被调用函数是一个比较耗时的任务当我们不必获得它的结果后才能继续主程序时，这种处理是很好的。

获取异步方法内的数据

在ES6之前，处理异步通常采用callback方法:

function getData(callback){
    //setTimeout:一个异步方法
    setTimeout(()=>{
        var name = 'Feo';
        callback(name);
    },1000);
}

//外部获取异步方法内数据
getData(function(Data){
    console.log(Data);
})

ES6中对异步的处理主要是使用Promise对象:

var MyPromise = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        var name = 'Feo';
        resolve(name);
    },1000);
})
//外部调用，获取异步函数内部的数据
MyPromise.then((data)=>{
    console.log(data);
})

resolve:成功后执行的回调函数。

reject:失败以后执行的回调函数。

关键词: async && await

async:用于声明一个异步方法

await:用于等待一个异步方法的执行完成

1.小测试:

async function simpleAsyncFunction(){
    return "Hola, Feo!";
}

function testFunction1(){
    console.log(simpleAsyncFunction());
    //结果: Promise{ "Hola, Feo!" }

    console.log(await simpleAsyncFunction());
    //报错，因为await只能用在异步方法内.
}

async function testFunction2(){
    var data = await simpleAsyncFunction();//等待函数执行完再赋值
    console.log(data);
    //结果: Hola, Feo!

    var data1=simpleAsyncFunction();
    console.log(data1);//赋值还没执行完便开始log
    //结果: undefined;
}

2.封装异步方法

如果我们希望一个异步函数内部做完自己的工作后再返回一个结果，比较好的写法是让异步方法返回一个Promise对象,这里以setTimeout方法为例:

async function simpleAsyncFunction1(){
    return new promise((resolve,reject)=>{
        setTimeout(function(){
            var name = "Feo";'
            resolve(name);
        },1000)
    })
}

async function testFunction3(){
    var data= await simpleAsyncFunction1();
    console.log(data);
    //结果: Feo
}