早点下班（Vue2.7版）：旧项目也能少写 40%+ 异步代码

匿名上传

发布时间:2026-03-12 20:36:01

前段我在文章早点下班：在 Vue3 中少写 40%+ 的异步代码中分享了自己开发的 vue-asyncx，当时就有同学问：那 Vue 2 的老项目呢？就在今天，它来了！

vue-asyncx 发布 v1.11.0 版本，该版本向前兼容 Vue 2.7，同样帮你秒减 40%+ 异步代码。写法用法与在 Vue 3 中一模一样，毫不妥协。

如果你还在维护 Vue 2.7 的老项目，每次写异步请求都要手动管理 loading、error、data，还要处理竞态问题。那这篇文章，可能就是你的「下班加速I器」

少说废话，先看代码！

先来看个最常见的详情页查询

<!-- 老项目里的经典异步三板斧 + watch 联动 -->
<template>
  <div>
    <div v-if="queryDetailLoading">加载中...</div>
    <div v-else-if="queryDetailError">加载失败：{{ queryDetailError.message }}</div>
    <div v-else>
      <h2>{{ detail.name }}</h2>
      <p>{{ detail.desc }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: { id: String },
  data() {
    return {
      detail: null,
      queryDetailLoading: false,
      queryDetailError: null
    }
  },
  created() {
    this.queryDetail()
  },
  watch: {
    id: function () {  
      this.queryDetail()
    },
  },
  methods: {
    async queryDetail() {
      this.queryDetailLoading = true
      this.queryDetailError = null
      try {
        //  有坑：快速切换 id，旧请求返回覆盖新数据（竞态）
        this.detail = await queryDetailApi(this.id)
      } catch (e) {
        this.queryDetailError = e
      } finally {
        this.queryDetailLoading = false
      }
    }
  }
}
</script>

这段代码，你是不是写过 10 遍、20 遍、100 遍？

别急，现在，这些样板代码可以一键消失了。

代码对比：少写 40%+ 是什么体验？

传统写法（~20 行）

export default {
  props: { id: String },
  data() {
    return {
      detail: null,
      queryDetailLoading: false,
      queryDetailError: null
    }
  },
  created() {
    this.queryDetail()
  },
  watch: {
    id: function () {  
      this.queryDetail()
    },
  },
  methods: {
    async queryDetail() {
      this.queryDetailLoading = true
      this.queryDetailError = null
      try {
        //  有坑：快速切换 id，旧请求返回覆盖新数据（竞态）
        this.detail = await queryDetailApi(this.id)
      } catch (e) {
        this.queryDetailError = e
      } finally {
        this.queryDetailLoading = false
      }
    }
  }
}

vue-asyncx 写法（~8 行）

import { useAsyncData } from 'vue-asyncx'

export default {
  props: { id: String },
  setup(props) {
    const { 
      detail, 
      queryDetail, 
      queryDetailLoading, 
      queryDetailError 
    } = useAsyncData('detail', () => queryDetailApi(props.id), { 
      immediate: true,  // setup 执行时自动请求
      watch: () => props.id  // id 变化自动重新请求 + 竞态防护
    })
    return { detail, queryDetail, queryDetailLoading, queryDetailError }
  }
}

核心能力一览：

代码一屏变半屏，逻辑聚合在一起
loading / error / data 自动绑定，响应式更新
watch 依赖自动追踪：props.id 变化自动重新请求
竞态请求自动处理：快速切换 id 时，旧数据自动废弃，不串数据
支持手动触发 queryDetail()、防抖节流
TypeScript 友好，智能类型推导

两个核心 API，覆盖 90% 异步场景

1️⃣ `useAsyncData`：自动执行 + 数据绑定，查询类场景神器

import { useAsyncData } from 'vue-asyncx'

export default {
  props: { id: String },
  setup(props) {
    const { 
      detail,              // 异步数据（响应式）
      queryDetail,         // 手动查询函数（可选）
      queryDetailLoading,  // 加载状态
      queryDetailError,    // 错误状态
    } = useAsyncData('detail', () => queryDetailApi(props.id), {
      immediate: true,     // setup 执行时自动调用
      watch: () => props.id  //  id 变化，自动重新请求
    })

    return { detail, queryDetail, queryDetailLoading, queryDetailError }
  }
}

适用场景：详情页加载、列表查询、参数变化自动刷新的数据获取

2️⃣ `useAsync`：包装异步函数，自动管理状态

import { useAsync } from 'vue-asyncx'

export default {
  setup() {
    const { 
      submit,           // 包装后的异步函数（可直接绑定 @click）
      submitLoading,   // 加载状态（响应式）
      submitError,     // 错误状态（响应式）
    } = useAsync('submit', submitApi)

    return { submit, submitLoading, submitError }
  }
}

适用场景：表单提交、按钮操作、手动触发的异步任务

useAsyncData 和 useAsync 的首个参数实际上是变量名。

对于 useAsyncData，传入 'detail' 返回 detail、queryDetail、queryDetailLoading 等
对于 useAsync 传入 'submit' 返回 submit、submitLoading 等

这种命名约定方式在代码可读性、团队协作性上有巨大优势，且在 TS 加持下不损失开发效率。

️ Vue 2.7 接入示例：详情页完整实战

常规详情信息获取 + 审批确认详情页

<!-- DetailPage.vue -->
<template>
  <div>
    <!-- 加载状态 -->
    <div v-if="queryDetailLoading" class="loading">
      <Spinner /> 加载中...
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="queryDetailError" class="error">
      <ErrorMsg :error="queryDetailError" />
      <button @click="queryDetail()">重试</button>
    </div>
    
    <!-- 数据展示 -->
    <div v-else class="detail">
      <h2>{{ detail.name }}</h2>
      <p>{{ detail.desc }}</p>
    </div>
    
    <!-- 确认操作 -->
    <button @click="confirm" v-loading="confirmLoading">确认</button>
  </div>
</template>

<script>
import { useAsyncData, useAsync } from 'vue-asyncx'
import { queryDetailApi, confirmApi } from '@/api/detail'

export default {
  props: { id: String },
  setup(props) {
    //  详情获取：一个调用搞定详情页查询 + 自动 watch + 竞态防护
    const { 
      detail, 
      queryDetail, 
      queryDetailLoading, 
      queryDetailError 
    } = useAsyncData('detail', () => queryDetailApi(props.id), {
      immediate: true,
      watch: () => props.id  // id 变化自动重新请求，旧请求自动取消
    })

    //  确认操作：手动触发的异步任务
    const { confirm, confirmLoading } = useAsync('confirm', 
      () => confirmApi(props.id).then(() => queryDetail())
    )

    return {
      detail,
      queryDetail,
      queryDetailLoading,
      queryDetailError,
      confirm,
      confirmLoading
    }
  }
}
</script>

用 Vue Options 实现相同功能：

代码量轻松翻一倍
代码交织、阅读需要上下跳转，无法做到：详情获取逻辑在一起，确认操作逻辑在一起

为什么支持 Vue 2.7？

很多团队不是不想升级 Vue 3，而是：

老项目重构成本高，业务迭代紧
老项目只是维护，偶尔有新需求，没有重构资源
Vue 2.7 也能用 Composition API，够用了

vue-asyncx 想你所想，让旧项目也能享受异步管理的优雅。

用 options 也没有关系，加个 setup 属性，马上就能用，渐进式改造。
后期老项目升级 Vue 版本，API 一模一样，一行代码都不用改

质量保障：敢在生产环境用的底气

很多人问：「新库稳不稳定？老项目敢不敢接？」

直接上数据

指标	数值	说明
单元测试	300+	覆盖所有 API 边界场景
E2E 测试	10+	模拟真实用户使用流程
双版本测试		Vue 2.7 / 3 相同测试用例、流程，确保行为一致
CI/CD	GitHub Actions	每次提交自动跑全量测试
代码覆盖率	100%	分支/语句/函数全覆盖