promise 改写async/await的正确方式

如果promiseA是一个异步请求,在UI上为了便于展示需要在请求开始的时候设置loading:true,结束的时候设置loading:false。

promise形式就是:

```

let loading = true;

promiseA.then(data => {

    loading = false;

}).catch(e => {

    loading = false;

}

```

怎么转换成promise形式呢?

我一开始转换成:

```

async function transform () {

    loading = true;

    await promsieA;

    loading = false;

}

```

发现只有请求成功的时候才会生效,后来发现await 后面跟的语句只有promise转换成fulfilled才会生效,failed状态时不会。运行:

```

async function test() {

    await Promise.reject();

    console.log('rejected');

}

test()

```

永远不会输出‘rejected'。

正确的改写方式应该是添加try/catch

```

async function transform () {

    loading = true;

    try {

        await promiseA;

        loading = false;

    } catch (e) {

        loading = false;

    }

}

```

这样就改写成功了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 含义 async函数是Generator函数的语法糖,它使得异步操作变得更加方便。 写成async函数,就是下面这...
    oWSQo阅读 6,017评论 0 2
  • async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 async 函数是...
    huilegezai阅读 5,023评论 0 6
  • 简单介绍下这几个的关系为方便起见 用以下代码为例简单介绍下这几个东西的关系, async 在函数声明前使用asyn...
    _我和你一样阅读 21,439评论 1 24
  • async/await 的基础使用及原理简介https://www.cnblogs.com/zhengyufeng...
    胖哆啦阅读 3,720评论 0 1
  • 异步编程模式在前端开发过程中,显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。...
    SCQ000阅读 7,734评论 1 51

友情链接更多精彩内容