Vue 中 Promise 异步和同步的使用

最新推荐文章于 2025-03-12 13:55:46 发布

曾令胜

最新推荐文章于 2025-03-12 13:55:46 发布

阅读量1.7k

点赞数 1

分类专栏：笔记文章标签： vue

原文链接：https://blog.youkuaiyun.com/xiaoxionglove/article/details/104978673

版权

笔记专栏收录该内容

15 篇文章

订阅专栏

本文通过一个简单的示例对比了同步与异步更新在前端应用中的使用方式及效果。通过点击按钮来改变页面上的商品名称，演示了两种不同执行方式下数据更新的顺序差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="app-container">
    <h1>商品信息</h1>
 
    <div class="block">
      测试Promise:
      <div>
        操作人{{who}},改变了商品名称:{{merchandiseName}} <el-button @click="changeMerchandiseNameSync" type="primary">changeMerchandiseNameSync</el-button>
      </div>
      <div style="margin-top:10px">
        操作人{{who}},改变了商品名称:{{merchandiseName}} <el-button @click="changeMerchandiseNameAsync" type="primary">changeMerchandiseNameAsync</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
         merchandiseName:'default',
         who:'default'
      }
    },
    methods:{
      changeMerchandiseNameAsync(){
        //异步执行
        this.requestMerchandiseName().then(responseMesssage=>{
         this.merchandiseName=responseMesssage;
        }).catch(error=>{
          alert(error);
        });
        //不会等待requestMerchandiseName方法执行完
        this.who='张三';
      },
 
      async changeMerchandiseNameSync(){
         //同步执行
        const responseMesssage = await this.requestMerchandiseName().catch(error=>{
          alert(error);
        });
        this.merchandiseName=responseMesssage;
        //等待requestMerchandiseName方法执行完再执行下面代码
        this.who='张三';
      },
 
      requestMerchandiseName(){
        return new Promise((resolver,reject)=>{
          setTimeout(() => {
            //reject('error 500');
            resolver('i am learning');
          }, (3000));
        })
      }
    }
  }
</script>
 
<style scoped>
.block{
  border: solid 1px #ccc;
  padding: 20px;
}
</style>