vue3 组合式axios

原创

mob649e81583204 2024-03-23 03:59:29 ©著作权

文章标签 ios 数据模块化 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e81583204的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现"vue3 组合式axios"教程

介绍

在这篇文章中，我将教会你如何在Vue3中使用组合式api来封装axios请求，让你的代码更加模块化和易于维护。

整体流程

下面是整个实现过程的步骤概览：

journey
    title 实现"vue3 组合式axios"流程
    section 步骤
        开始 --> 创建useAxios组合式函数 --> 发起axios请求 --> 返回数据 --> 结束

具体步骤

步骤1：创建useAxios组合式函数

首先，我们需要创建一个名为useAxios的组合式函数，用来封装axios请求。在Vue3中，我们可以通过ref和axios来实现这个功能。

```javascript
// src/composables/useAxios.js

import { ref } from 'vue';
import axios from 'axios';

const useAxios = () => {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetchData = async (url) => {
    loading.value = true;
    try {
      const response = await axios.get(url);
      data.value = response.data;
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  };

  return { data, loading, error, fetchData };
};

export default useAxios;
```markdown

步骤2：发起axios请求

接下来，我们需要在组件中使用上一步创建的useAxios函数来发起axios请求，并获取数据。

```javascript
// src/components/MyComponent.vue

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error }}</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

<script>
import { useAxios } from '../composables';

export default {
  setup() {
    const { data, loading, error, fetchData } = useAxios();

    onMounted(() => {
      fetchData('
    });

    return { data, loading, error };
  },
};
</script>
```markdown