ES7中Async/await如何使用-创新互联
这篇文章给大家介绍ES7中Async/await如何使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站设计制作、成都网站制作、阳江网络推广、小程序制作、阳江网络营销、阳江企业策划、阳江品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联为所有大学生创业者提供阳江建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.comPromise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
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) } })
上面可以得到我们想要的结果 res ---> { "url": "data2.json" }
多个ajax请求时
但是 当得到的数据 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) } }) }, 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"} })
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('请求失败') } }) }) }; 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(); // 需要执行异步函数
关于ES7中Async/await如何使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前标题:ES7中Async/await如何使用-创新互联
本文来源:http://myzitong.com/article/dejpsh.html