async、await 与 Promise 自己的理解

最新推荐文章于 2025-01-19 22:16:53 发布

原创最新推荐文章于 2025-01-19 22:16:53 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了async函数的特点及其如何与Promise对象交互。通过示例代码详细解释了async函数如何返回Promise对象，以及如何使用await关键字来简化Promise的链式调用。

async函数修饰符

被async修饰的函数特点：

返回一个Promise对象，可以使用then(data=>{})添加回调函数
还可以作为普通函数运行，但函数里面可以使用 await 关键字

async函数返回的是Promise对象

async function f1(){
 return 1
}
async function f2(){
 return Promise.resolve(2)
}
const result1 = f1()
const result2 = f2()
console.log(result1);
console.log(result2);
//f1虽然返回的是1，系统会自动给我们封装成一个promise对象给我们返回

await相当于promise.then成功的情况

// 也就是说，promise.resolve() 就相当于 await

async function fn(){
  const p = Promise.resolve('成功')
  p.then(data=>{
    console.log('data_then',data);
  })
  let await_Data = await p 
  console.log('await_Data',await_Data);
}
fn()
//data_then 成功
// await_Data 成功

//可以可看出,p.then 可以用 await p 替代,
// 结合（一、await自动封装Promise）, await 4 其实等于 await Promise.resolve(4)

Promise.catch 异常的情况，对应try…catch

async function fn(){
  const p = Promise.reject('失败')

  // then写法
  p.then((res,rej)=>{
    console.log('data_then',res,rej);
  }).catch(e=>console.log(e))
  // await 写法
  try{
    let await_Data = await p 
    console.log('await_Data',await_Data);
  }catch(e){
    console.log('error',e);
  }
}
fn()
//error 失败
//失败