JS学习- ES6 async await使用

async 函数是什么?一句话,它就是 Generator 函数的语法糖。

使用场景常常会遇到,请求完一个接口,拿完值再去请求另外一个接口,我们之前回调callback函数处理,如果很多的情况下,看起来很冗余,这时我们可以用async函数。

比如我们有两个请求,如下,这里用的axios:

 

function getCode(){ return axios.get(‘json/code.json‘); } function getlist(params){ return axios.get(‘json/person.json‘,{params}) }

 

我们第二个请求获取列表的时候需要使用第一个请求得到的code值,只有code值为0时,才能请求,而且当做参数传进去,那么我们看一下常规的做法吧

function getFinal(){ console.log("我是getFinal函数") getCode().then(function(res){ if(res.data.code == 0){ console.log(res.data.code); var params = { code:res.data.code } getlist(params).then(function(res){ if(res.data.code == 0){ console.log(res.data.list); } }) } }) } getFinal();

来一个async await的写法

async function getResult(){ console.log("我是getResult函数") let code = await getCode(); console.log(code.data.code); if(code.data.code == 0){ var params = { code:code.data.code } let list = await getlist(params); console.log(list.data.list); } }getResult();

处理异常,可以加上try catch

async function getResult(){ console.log("我是getResult函数") try{ let code = await getCode(); console.log(code.data.code); if(code.data.code == 0){ var params = { code:code.data.code } let list = await getlist(params); console.log(list.data.list); } }catch(err){ console.log(err); } }getResult();

 

 

基本用法:

返回promise对象 

 

有时,我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个 await 放在 try...catch 结构里面,这样不管这个异步操作是否成功,第二个 await 都会执行。

async function f() { try { await Promise.reject(‘出错了‘); } catch(e) { } return await Promise.resolve(‘hello world‘);}f().then(v => console.log(v))// hello world

如果有多个 await 命令,可以统一放在 try...catch 结构中。

async function main() { try { const val1 = await firstStep(); const val2 = await secondStep(val1); const val3 = await thirdStep(val1, val2); console.log(‘Final: ‘, val3); } catch (err) { console.error(err); }}

  

相关文章