---

一、前言

如果你想將兩個調用接口的操作封裝在不同的方法中，你可以考慮將這兩個方法分別定義為異步函數，并在需要時依次調用它們。以下是一個示例代碼：

1、代碼

<template><div><button @click="addAndFetch">新增并查詢</button><p v-if="loading">加載中...</p><div v-if="result"><h2>{{ result.title }}</h2><p>{{ result.body }}</p></div><p v-if="error">{{ error }}</p></div>
</template><script>
import { ref } from 'vue';
import axios from 'axios';export default {setup() {const loading = ref(false);const result = ref(null);const error = ref('');// 封裝新增接口調用const addPost = async () => {try {const addResponse = await axios.post('https://jsonplaceholder.typicode.com/posts', {title: 'New Post',body: 'This is a new post.',userId: 1,});return addResponse.data;} catch (err) {throw new Error('新增操作失敗');}};// 封裝查詢接口調用const fetchPost = async (postId) => {try {const fetchResponse = await axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}`);return fetchResponse.data;} catch (err) {throw new Error('查詢操作失敗');}};// 新增并查詢操作const addAndFetch = async () => {loading.value = true;try {// 調用新增接口方法const addedPost = await addPost();// 調用查詢接口方法result.value = await fetchPost(addedPost.id);} catch (err) {error.value = err.message;} finally {loading.value = false;}};return {loading,result,error,addAndFetch,};},
};
</script>

在這個示例中，我們將新增接口調用封裝在 addPost 方法中，將查詢接口調用封裝在 fetchPost 方法中。然后，在 addAndFetch 方法中依次調用這兩個封裝的方法，以實現新增并查詢的操作。

這種方式使代碼更加模塊化和可維護，每個方法都負責一個特定的功能，降低了代碼的復雜度。