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

川长思鸟来 2022-09-03 14:17 150阅读 0赞

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);

打印结果如下：

![4843d76426c68636e2e567bfb8ec1b5e.png][]

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来延时，调用结果符合预期：

![7464f6143dd7127a0e605eed92157ba3.png][]

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

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

var rst=await ajax(url);

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

return rst;

打印结果如下：

![2d76ccbae34948bc6bd66158856a5b88.png][]

两个都是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);

\});

打印结果如下：

![620fc931000bda7b879fa75d740d7c00.png][]

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);

\});

打印结果如下：

![e7ece5c32963067fec480958d898fd43.png][]

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

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

[4843d76426c68636e2e567bfb8ec1b5e.png]: /images/20220829/8a64e24fcff445c5ac09f96cf58821e8.png
[7464f6143dd7127a0e605eed92157ba3.png]: /images/20220829/48af5477989e4cbf8c8d1aca329c8dfd.png
[2d76ccbae34948bc6bd66158856a5b88.png]: /images/20220829/ae2c13404c1942a4b7db8229a7f7fc77.png
[620fc931000bda7b879fa75d740d7c00.png]: /images/20220829/b829f425e04344c68667fe0f24a2d861.png
[e7ece5c32963067fec480958d898fd43.png]: /images/20220829/87e168b1b11f49119e6b76206b045a0c.png