ES7-async和await

上一篇博客使用

Promise 和 Generator 结合

实现把

异步代码风格写成同步代码的风格

，其实这种方式在ES7语法里面认为是过时了。那么ES7语法里面如何实现把

异步代码风格写成同步代码的风格

?

在ES7里面要实现把

异步代码风格写成同步代码的风格

已经变的更加简单了，仅仅使用到

async 和 await

这两个关键字就可以实现。

需求：还是上篇的需求，使用ajar依次发送3次网络请求, 必须前一次发送成功后才能进行下一次的网络请求。

目的：使用ES7语法实现把异步代码的风格写成了同步代码的风格。

1.Promise + async + await +ajar 实现

1.定义一个同步函数

2.在同步函数中使用await语句

3.执行同步函数

Promise : 对象哪里用到了？ $.ajax({ }) 返回的就是Promise对象

<script src="jquery-1.11.3.min.js"></script>
<script>
/**
* 1.定义一个同步函数，类似Generator函数的功能
*  async : 类似Generator函数的 *     ; async声明函数为同步函数
*  await : 类似Generator函数的 yield ; await语句会暂停函数执行
* @returns {Promise.<void>}
*/
async function myFetchs() {
/*1.1第一次网络请求*/
var result1=await $.ajax({url:'user.json',dataType:'json'})
console.log(result1); // 第一次请求的结果
/*1.2 第一次网络请求*/
var result2=await $.ajax({url:'banners.json',dataType:'json'});
console.log(result2); // 第二次请求的结果
/*1.3 第一次网络请求*/
var result3=await $.ajax({url:'goods.json',dataType:'json'});
console.log(result3); // 第三次请求的结果
}

/**
* 2.发起三次网络请求
*/
myFetchs();

</script>

看完上面的代码是不是已经惊呆了，并没有调用next的函数来一步一执行，其实async 函数已经实现了这个功能。

在ES7语法中，只要定义一个async函数，然后执行async函数就可以实现把异步代码的风格写成了同步代码的风格，非常简单。

这几行代码实现的功能与上一篇博客实现的功能完全一样。