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

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

相关推荐
mCell21 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip21 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 天前
JavaScript 作用域
前端·javascript
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试