Vue3按顺序调用新增和查询接口

Vue3按顺序调用新增和查询接口


一、前言

如果你想将两个调用接口的操作封装在不同的方法中,你可以考虑将这两个方法分别定义为异步函数,并在需要时依次调用它们。以下是一个示例代码:

1、代码

html 复制代码
<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 方法中依次调用这两个封装的方法,以实现新增并查询的操作。

这种方式使代码更加模块化和可维护,每个方法都负责一个特定的功能,降低了代码的复杂度。

相关推荐
Sheldon一蓑烟雨任平生4 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
孤狼warrior5 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉5 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5205 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck5 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
华仔啊6 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
Sheldon一蓑烟雨任平生7 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
CsharpDev-奶豆哥7 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
yume_sibai10 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书10 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript