JavaScript中对于 promise和async和await的理解

对于一段基于promise的异步操作,我们可以这样使用

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function fn1 (ms){
  return new Promise(
      (reslove) => {
        setTimeout(()=>{
        console.log('--定时器内--',ms)
        reslove(ms)
      },ms)
    }
  )
}
 
function fn2 (value,ms){
  console.log('头'
  fn1(ms).then((res)=>{
    console.log(value,'一个value',res,'返回值')
    console.log('尾巴')
  })
   
 }
 
fn2('输入值',2000)

  

用async和await可以这样改写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
async function fn1 (ms){
  await new Promise(
      (reslove) => {
        setTimeout(()=>{
        console.log('--定时器内--',ms)
        reslove(ms)
      },ms)
    }
  )
}
 
async function fn2 (value,ms){
  console.log('头'
  const result = await fn1(ms)
  console.log(value,'一个value',result,'返回值'
  console.log('尾巴')
}
 
fn2('输入值',2000)

  

如果promise要进入reject(失败)状态

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function fn1 (ms){  <br>  return new Promise(
      (reslove,reject) => {
        let bool = false
        setTimeout(()=>{
        console.log('--定时器内--',ms)
        if(bool){
            reslove()
        }else{
            reject()
        }
      },ms)
    }
  )
}
 
function fn2 (value,ms){
  console.log('头'
  fn1(ms).then(()=>{
    console.log(value,'一个value')
    console.log('尾巴')
  }).catch(()=>{
      console.log('报错——这里会有错误提示')
 
})
   
 }
 
fn2('输入值',2000)<br>
   //  头
  //   定时器内--,2000
 //   报错——这里会有错误提示

  

await也能返回Promise对象

但是我们也想捕捉reject(失败)状态的话,可以考虑try,catch或者用返回promise的catch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
async function fn1 (ms){
  await new Promise(
      (reslove,reject) => {
        let bool = false
        setTimeout(()=>{
        console.log('--定时器内--',ms)
        if(bool){
            reslove()
        }else{
            reject('报错——这里会有错误提示')
        }
      },ms)
    }
  )
}
 
async function fn2 (value,ms){
  try{
    console.log('头'
    await fn1(ms)
    console.log(value,'一个value')
    console.log('尾巴')
  }catch(err){
      console.log(err)
  }
 }
// 或async function fn2 (value,ms){
    console.log('头'
    await fn1(ms).then((res) =>{}).catch((err) => {console.log(err)})
    console.log(value,'一个value')
    console.log('尾巴')
 }<br>
fn2('输入值',2000)
 
//  头
//  --定时器内--,2000
//  报错——这里会有错误提示

  

 

posted @   时间观测者  阅读(108)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
点击右上角即可分享
微信分享提示