vue3 ts 两个接口返回结果后再执行下一步

<think>我们有两个接口请求，需要在两个请求都完成后执行后续操作。在Vue3和TypeScript环境下，我们可以使用`Promise.all`或`Promise.allSettled`来等待多个异步请求完成。下面我将结合Vue3的Composition API和TypeScript来展示如何实现。 ### 步骤 1. 定义两个接口请求函数，并返回Promise。 2. 在组件中使用`Promise.all`等待两个请求完成。 3. 处理请求结果，进行类型检查。 ### 示例代码 假设我们有两个获取数据的接口： - 获取用户信息：`fetchUserInfo()` - 获取商品列表：`fetchProductList()` #### 定义接口和请求函数 首先，我们定义TypeScript类型和请求函数： ```typescript // types.ts export interface UserInfo { id: number; name: string; email: string; } export interface Product { id: number; name: string; price: number; } ``` ```typescript // api.ts import { UserInfo, Product } from './types'; // 模拟请求用户信息 export function fetchUserInfo(): Promise<UserInfo> { return new Promise((resolve) => { setTimeout(() => { resolve({ id: 1, name: 'John Doe', email: '[email protected]' }); }, 1000); }); } // 模拟请求商品列表 export function fetchProductList(): Promise<Product[]> { return new Promise((resolve) => { setTimeout(() => { resolve([ { id: 1, name: 'Product 1', price: 100 }, { id: 2, name: 'Product 2', price: 200 }, ]); }, 1500); }); } ``` #### 在Vue组件中使用 在Vue组件中，我们使用`ref`来存储数据，并在`onMounted`生命周期中发起请求。 ```vue <template> <div v-if="loading">Loading...</div> <div v-else> <h2>User Info</h2> <p>Name: {{ userInfo?.name }}</p> <p>Email: {{ userInfo?.email }}</p> <h2>Products</h2> <ul> <li v-for="product in productList" :key="product.id"> {{ product.name }} - ${{ product.price }} </li> </ul> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { fetchUserInfo, fetchProductList } from './api'; import type { UserInfo, Product } from './types'; // 定义响应式数据 const loading = ref(true); const userInfo = ref<UserInfo | null>(null); const productList = ref<Product[]>([]); onMounted(async () => { try { // 使用Promise.all同时发起两个请求，并等待它们完成 const [userRes, productRes] = await Promise.all([ fetchUserInfo(), fetchProductList() ]); // 赋值 userInfo.value = userRes; productList.value = productRes; loading.value = false; } catch (error) { console.error('请求失败:', error); loading.value = false; // 处理错误 } }); </script> ``` ### 关键点说明 1. **类型定义**：我们为接口返回的数据定义了TypeScript类型（`UserInfo`和`Product`），并在请求函数和组件中使用了这些类型，以增强类型安全。 2. **Promise.all**：`Promise.all`接收一个Promise数组，当所有Promise都resolve时，返回一个结果数组，顺序与传入的Promise数组顺序一致。如果其中一个Promise被reject，则整个`Promise.all`会立即reject，进入catch块。 3. **错误处理**：使用try/catch来捕获可能发生的错误。 4. **加载状态**：使用`loading`变量来管理加载状态，在请求完成前显示加载提示。 ### 替代方案：Promise.allSettled 如果希望即使其中一个请求失败，也要继续处理另一个请求的结果，可以使用`Promise.allSettled`： ```typescript onMounted(async () => { loading.value = true; const results = await Promise.allSettled([ fetchUserInfo(), fetchProductList() ]); const [userResult, productResult] = results; // 处理用户信息 if (userResult.status === 'fulfilled') { userInfo.value = userResult.value; } else { console.error('获取用户信息失败:', userResult.reason); } // 处理商品列表 if (productResult.status === 'fulfilled') { productList.value = productResult.value; } else { console.error('获取商品列表失败:', productResult.reason); } loading.value = false; }); ``` ### 在Vue3中使用Composition API的优势 使用`<script setup>`语法和Composition API，我们可以更清晰地组织代码，并且TypeScript支持更好。通过类型定义，我们可以确保在模板中访问数据属性时具有正确的类型提示，减少运行时错误。 ### 相关问题 1. 如何在Vue3中处理多个异步请求的错误？ 2. Vue3的Composition API中如何优雅地管理多个异步请求的状态？ 3. TypeScript中如何为异步请求的返回结果定义复杂的嵌套类型？ 4. 在Vue3中使用TypeScript时，如何为组件的props和emits定义类型？ 以上实现可以帮助你在Vue3和TypeScript项目中等待两个接口请求完成后再执行下一步操作。</think>在 Vue3 中使用 TypeScript 实现等待两个接口请求完成后再执行下一步操作，可以通过 `Promise.all` 或 `Promise.allSettled` 结合 Composition API 实现。以下是完整解决方案： ### 解决方案（使用 Composition API + TypeScript） ```typescript // 1. 定义接口返回类型 interface UserData { id: number; name: string; email: string; } interface ProductData { id: number; title: string; price: number; } // 2. 封装API请求函数（返回Promise） const fetchUserData = (): Promise<UserData> => { return new Promise((resolve) => { // 实际请求逻辑（如axios/fetch） setTimeout(() => resolve({ id: 1, name: 'John', email: '[email protected]' }), 1000); }); }; const fetchProductData = (): Promise<ProductData> => { return new Promise((resolve) => { setTimeout(() => resolve({ id: 101, title: 'Vue Book', price: 99 }), 1500); }); }; // 3. 在Vue组件中使用 <script setup lang="ts"> import { ref, onMounted } from 'vue'; // 定义响应式数据 const userData = ref<UserData | null>(null); const productData = ref<ProductData | null>(null); const loading = ref(true); const error = ref<string | null>(null); // 处理数据的方法 const processResults = (user: UserData, product: ProductData) => { console.log('处理结果:', user, product); // 这里执行你的业务逻辑... }; // 生命周期钩子中执行请求 onMounted(async () => { try { // 4. 使用Promise.all等待两个请求完成 const [userRes, productRes] = await Promise.all([ fetchUserData(), fetchProductData() ]); // 5. 赋值给响应式变量 userData.value = userRes; productData.value = productRes; // 6. 执行后续操作 processResults(userRes, productRes); } catch (err) { error.value = '请求失败: ' + (err as Error).message; } finally { loading.value = false; } }); </script> <template> <div v-if="loading">加载中...</div> <div v-else-if="error" class="error">{{ error }}</div> <div v-else> <h2>用户信息: {{ userData?.name }}</h2> <h2>商品信息: {{ productData?.title }}</h2> </div> </template> ``` ### 关键点说明 1. **类型定义**： - 明确定义接口返回数据的 TypeScript 类型（`UserData`, `ProductData`） - 使用 `ref` 时指定泛型类型保证类型安全 2. **Promise.all 机制**： ```typescript const [userRes, productRes] = await Promise.all([fetchUserData(), fetchProductData()]) ``` - 同时发起两个异步请求 - 等待所有请求完成后再继续执行 - 使用数组解构获取结果 3. **错误处理**： - 使用 `try/catch` 捕获可能的异常 - 通过 `error` 响应式变量显示错误信息 - `finally` 块确保无论成功与否都更新加载状态 4. **替代方案 Promise.allSettled**： 如果希望即使部分请求失败也继续执行： ```typescript const results = await Promise.allSettled([ fetchUserData(), fetchProductData() ]); const userRes = results[0].status === 'fulfilled' ? results[0].value : null; const productRes = results[1].status === 'fulfilled' ? results[1].value : null; ``` ### 在 Vue3 Composition API 中的最佳实践 1. **使用 `onMounted` 生命周期钩子**： 确保在组件挂载后再发起请求 2. **封装为独立函数**： 可将请求逻辑提取到单独函数中： ```typescript const fetchAllData = async () => { loading.value = true; try { const results = await Promise.all([fetchUserData(), fetchProductData()]); // 处理结果... } catch (err) { // 错误处理... } finally { loading.value = false; } } ``` 3. **使用自定义 Hook**（高级）： 创建可复用的异步处理 Hook： ```typescript // useAsyncData.ts import { ref } from 'vue'; export function useAsyncData<T>(promise: Promise<T>) { const data = ref<T | null>(null); const loading = ref(true); const error = ref<string | null>(null); promise .then(result => data.value = result) .catch(err => error.value = err.message) .finally(() => loading.value = false); return { data, loading, error }; } // 在组件中使用 const { data: userData } = useAsyncData(fetchUserData()); const { data: productData } = useAsyncData(fetchProductData()); ``` ### 注意事项 1. **类型安全**： - 始终为接口响应定义 TypeScript 类型 - 使用可选链操作符 `?.` 避免访问未定义属性 2. **性能优化**： - 考虑添加请求取消逻辑（使用 AbortController） - 对于频繁请求，可添加缓存机制 3. **响应式更新**： - 当结果变化时，Vue 会自动更新模板 - 对于复杂对象，使用 `reactive` 替代 `ref` 可能更合适 ### 相关问题 1. 如何在 Vue3 中优雅地处理多个异步请求的错误状态？ 2. TypeScript 中如何为嵌套的 API 响应数据结构定义类型？ 3. 如何在 Vue3 中使用 Composition API 实现请求的自动取消？ 4. Vue3 中如何为全局 API 请求添加统一的错误处理？ 5. 如何为 Promise.all 添加超时控制机制？ > 参考： > Vue3 官方组合式 API 文档[^1] > TypeScript 异步编程最佳实践[^3] > Vue3 + TypeScript 企业级实战[^5]