ES7之Async/await的使用详解前端

在 js 异步请求数据时，通常，我们多采用回调函数的方式解决，但是，如果有多个回调函数嵌套时，代码显得很不优雅，维护成本也相应较高。 ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖可以更好解决多层回调问题。

文章图片

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。
await 操作符用于等待一个Promise 对象吗。。它只能在异步函数 async function 中使用。
await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。
一个ajax请求时
通常使用 ajax 请求数据时，会

$.ajax({ url: 'data1.json', type: 'GET', success: function (res) { console.log(res) // 请求成功，则得到结果res }, error: function(err) { console.log(err) } })//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力

上面可以得到我们想要的结果 res —> { “url”: “data2.json” }
多个ajax请求时
【ES7之Async/await的使用详解】但是当得到的数据 res 需要用于另一个 ajax 请求时，则需要如下写法：

$.ajax({ url: 'data1.json', type: 'GET', success: function (res) { $.ajax({ url: res.url, // 将第一个ajax请求成功得到的res 用于第二个ajax请求 type: 'GET', success: function (res) { $.ajax({ url: res.url, // 将第二个ajax请求成功得到的res 用于第三个ajax请求 type: 'GET', success: function (res) { console.log(res) // {url: "this is data3.json"} }, error: function(err) { console.log(err) } }) }, error: function(err) { console.log(err) } }) },//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力 error: function(err) { console.log(err) } })

上面出现多个回调函数的嵌套，可读性较差（虽然这种嵌套在平常的开发中少见，但是在node服务端开发时，还是很常见的）
优化方法
使用 promise 链式操作
如下，使用 Promise，进行链式操作，可以使上面的异步代码看起来如同步般易读，从回调地狱中解脱出来。

function ajaxGet (url) { return new Promise(function (resolve, reject) { $.ajax({ url: url, type: 'GET', success: function (res) { resolve(res); }, error: function(err) { reject('请求失败'); } }) }) }; ajaxGet('data1.json').then((d) => { console.log(d); // {url: "data2.json"} return ajaxGet(d.url); }).then((d) => { console.log(d); // {url: "data3.json"} return ajaxGet(d.url); }).then((d) => { console.log(d); // {url: "this is data3.json"} })//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力

Async/await 方法

async 表示这是一个async函数，即异步函数，await只能用在这个函数里面。
await 表示在这里等待promise返回结果了，再继续执行。
await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）
await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
await 等待的虽然是promise对象，但不必写.then(…)，直接可以得到返回值。

执行一个ajax请求，可以通过如下方法：

function ajaxGet (url) { return new Promise(function (resolve, reject) { $.ajax({ url: url, type: 'GET', success: function (res) { resolve(res) }, error: function(err) { reject('请求失败') } }) }) }; async function getDate() { console.log('开始') let result1 = await ajaxGet('data1.json'); console.log('result1 ---> ', result1); // result1 ---> {url: "data2.json"} }; getDate(); // 需要执行异步函数

执行多个ajax请求时：

function ajaxGet (url) { return new Promise(function (resolve, reject) { $.ajax({ url: url, type: 'GET', success: function (res) { resolve(res) }, error: function(err) { reject('请求失败') } }) }) }; async function getDate() { console.log('开始') let result1 = await ajaxGet('data1.json'); let result2 = await ajaxGet(result1.url); let result3 = await ajaxGet(result2.url); console.log('result1 ---> ', result1); // result1 ---> {url: "data2.json"} console.log('result2 ---> ', result2); // result2 ---> {url: "data3.json"} console.log('result3 ---> ', result3); // result3 ---> {url: "this is data3.json"} }; getDate(); // 需要执行异步函数

async await捕捉错误:
async await中.then(…)不用写了，那么.catch(…)也不用写，可以直接用标准的try catch语法捕捉错误。
例如，如果下面的 url 写错了

function ajaxGet (url) { return new Promise(function (resolve, reject) { $.ajax({ url: url111, // 此处为错误的 url type: 'GET', success: function (res) { resolve(res) }, error: function(err) { reject('请求失败') } })//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力 }) }; async function getDate() { console.log('开始') try { let result1 = await ajaxGet('data1.json'); // 执行到这里报错，直接跳至下面 catch() 语句 let result2 = await ajaxGet(result1.url); let result3 = await ajaxGet(result2.url); console.log('result1 ---> ', result1); console.log('result2 ---> ', result2); console.log('result3 ---> ', result3); } catch(err) { console.log(err) // ReferenceError: url111 is not defined } }; getDate(); // 需要执行异步函数

结语
感谢您的观看，如有不足之处，欢迎批评指正。
#获取资料
为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：**619586920**欢迎大家进群交流讨论，学习交流，共同进步。
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。
最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。