问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

promise写法改写成async/await遇到的问题

头像
jamine
    501916

    demo代码如下：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>different way to handle async function</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <button @click="getResult">test promise</button>
        <button @click="getResult2">test async</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            methods: {
                // setTimeout模拟网络延时
                getFoo() {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve()
                        }, 5000)
                    })
                },
                getBar() {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve()
                        }, 1000)
                    })
                },
                // 先弹窗getBarSuccess后弹窗getFooSuccess
                // 即哪个请求先resolve则哪个callback先被执行
                getResult() {
                    this.getFoo().then(res => {
                        alert('getFooSuccess')
                    })
                    this.getBar().then(res => {
                        alert('getBarSuccess')
                    })
                },
                // 总是弹窗getFooSuccess后弹窗getBarSuccess，
                // 虽然barPromise早已经是resolve状态了，但是无法让他后面的alert('getBarSuccess')先执行
                async getResult2() {
                    const fooPromise = this.getFoo()
                    const barPromise = this.getBar()
                    await fooPromise
                    alert('getFooSuccess')
                    await barPromise
                    alert('getBarSuccess')
                }     
            }
        })
    </script>
</body>

</html>

    遇到的问题是：
    现在我想把getResult()方法这种promise调用的写法改成用ES7的async/await的写法，希望的是有两个顺序无关的请求，哪个请求先完成，则哪个请求的callback先被执行，但是改成用async/await似乎做不到。
    请教各位大佬支招一下，还是用async/await在这种场景下是无法实现的呢？
    在此感激不尽！

    javascriptvue.jsecmascript-6node.js
    阅读 6k
    5 个回答
    得票最新
    头像
    改名字很伤神
      7.9k3929
      ✓ 已被采纳

      你不需要等待返回结果，你又要await，这是几个意思呢，不要为了await而await。

      头像
      woai3c
        6.9k1139

        如果你的getFoo和getBar两个请求要改成顺序无关
        这样改就可以

        // getFoo
axios.get(xxx).then(() => {// 处理完成})
// getBar
axios.get(xxx).then(() => {// 处理完成})
        头像
        晨梦天旭
          3
          新手上路，请多包涵

          楼主应该先看看async/await的官方文档，MDN上这样写的：await的调用仍然是按顺序运行的，这意味着第二个await会等到第一个await运行结束。这使得代码完成运行只需要2秒，而不是3秒。这2秒是由最慢的计时器决定的。
          所以这句话有两个重点，async/await执行时顺序执行的，await的时间是由最慢的计时器所决定的。你的async函数写法就没写对。

          头像
          周小e丶
            8701110

            Promise.race了解一下

            头像
            原滋原味
              85412
              const fooPromise = this.getFoo()
const barPromise = this.getBar()
//这两句就已经执行了你的异步，你没有让它等待，安照js执行顺序直接执行下去了

//修改成这样就OK
async getResult2() {
    const fooPromise = await this.getFoo()
    alert('getFooSuccess')
    const barPromise = await this.getBar()
    alert('getBarSuccess')
}
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题