异步处理的方法

获取异步方法内的数据

在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
}