es6 ajax async,ES6的async function以及await 语句

ES6的async function和await语句

ES6的async function从字面意思上看，就是一个异步执行的函数，没错，它的真是意义也是这样的。async function as(x){

var x=await new Promise(resolve=>{

setTimeout(()=>{

resolve(x);

},2000);

});

console.log(x);

}

var rst=as(10);

console.log(rst);

打印结果如下：

async function的用法很简单，就是在函数前面加一个async修饰符，它的调用跟普通函数的调用一样，返回值是一个Promise对象，所以我们可以对它返回值使用then,fail函数的调用。

那么这个async的异步代码要符合什么要求呢，

下面我们用我前面写的promise原理，promise插件中自己实现的promise插件来调用一下：function ajax(url){

prom=PP.promise();

prom.start(function() {

var th=this;

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

setTimeout(function(){th.resolve("mooshine")},3000);

}

}

xhr.open("post", url, true);

xhr.send();

});

return prom;

}

async function get(url){

var rst=ajax(url);

console.log("rst:"+rst);

return rst;

}

get("js/mwaterfall.js").then(rst=>{

console.log(rst);

});

由于是本地服务器，速度太快，所以加了一个setTimout来延时，调用结果符合预期：

而这时，我们是没有使用await语句的，所以async函数中的console打印了，

我们加上await语句后：async function get(url){

var rst=await ajax(url);

console.log("rst:"+rst);

return rst;

}

打印结果如下：

两个都是3s后出现的。

自定义的Promise插件，在async函数中依然可用，那么jquery库的ajax也实现了promise的特性，那么我们使用jquery的$.post应该在async函数中也是可用的。async function get(url){

var rst=await $.post(url);

console.log(rst);

return rst;

}

get("js/mwaterfall.js").then(rst=>{

console.log(rst);

});

输出结果都是mwaterfall.js瀑布流插件的源码，并且加不加await的效果跟上面的例子一样，也就是说await的作用是让async函数值中的代码等待这一行执行返回后才执行下一行代码，跟生成器函数generator和yield语句很类似。而这个rst结果是promise或者类promise对象的resolve函数中传递的参数。async函数的then方法中的参数是return语句传递的参数。

类promise的插件都支持，那么原生的Promise对象就更支持了async function get(url){

var rst=await new Promise(resolve=>{

setTimeout(function(){

resolve("wang");

},3000);

})

console.log(rst);

return rst;

}

get("js/mwaterfall.js").then(rst=>{

console.log(rst);

});

打印结果如下：

await的语句可以顺序调用，下一个await的语句使用上一个await语句的返回结果async function get(url){

var rst=await new Promise(resolve=>{

setTimeout(function(){

console.log("1st");

resolve("wang");

},3000);

});

var rst2=await new Promise(resolve=>{

setTimeout(function(){

console.log("2st");

resolve(rst+"girl");

},3000);

});

return rst2;

}

get("js/mwaterfall.js").then(rst=>{

console.log(rst);

});

打印结果如下：

使用async函数，可以像同步代码一样书写异步代码，在生成器文章中我用伪代码实现了一个生成器的执行函数，也可以达到同步代码来书写异步代码的作用。

async通过可以判断自定义的promise和jquery的promise，我们可以得出async判断是不是异步promise对象是通过特征判断的，比如这个对象是否有"then"方法，是否有"resolve()"方法，是否有“state”状态等。这个有兴趣的可以自己测试。