有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

获取promise返回的值(ES6之async、await基础用法)

javascript 炮渣日记 2周前 (11-19) 48次浏览 已收录 0个评论 扫描二维码
1、async/await场景

用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时;

2、基本理解

  • async 函数返回的是一个promise 对象,如果要获取到promise 返回值,我们应该用then 方法;

async function timeout() {

return ‘hello world’

}

timeout().then(result => {

console.log(result);

})

console.log(‘虽然在后面,但是我先执行’);

  • 如果async 函数中有返回一个值 ,当调用该函数时,内部会调用Promise.resolve() 方法把它转化成一个promise 对象作为返回,但如果timeout 函数内部抛出错误呢? 那么就会调用Promise.reject() 返回一个promise 对象。

async function timeout(flag) {

if (flag) {

return ‘hello world’

} else {

throw ‘my god, failure’

}

}

console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。

console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

函数内部抛出错误, promise 对象有一个catch 方法进行捕获

timeout(false).catch(err => {

console.log(err)

})

  • 注意await 关键字只能放到async 函数里面

async function testResult() {

let result = await doubleAfter2seconds(30);

console.log(result);

}

await 表示等一下,代码就暂停到这里,不再向下执行了,它等什么呢?等后面的promise对象执行完毕,然后拿到promise resolve 的值并进行返回,返回值拿到之后,它继续向下执行。

获取promise返回的值(ES6之async、await基础用法)

这时你看到了then 的链式写法,有一点回调地域的感觉。

获取promise返回的值(ES6之async、await基础用法)
喜欢 (1)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址