vue3封装ajax

Vue 3 使用了 Composition API,其中 ref 和 reactive 是最常用的,我们可以使用它们来封装 Ajax。在之前我们需要导入 jQuery 或其他第三方库来进行 Ajax 请求,但是现在,我们可以使用原生的 fetch 函数或者 axios 进行封装。下面是使用 fetch 函数进行封装的示例:

import { ref } from 'vue';

export function useHttp() {
  const loading = ref(false);
  const data = ref(null);
  const error = ref(null);

  async function get(url) {
    loading.value = true;
    try {
      const response = await fetch(url);
      const responseData = await response.json();
      data.value = responseData;
    } catch (error) {
      error.value = error.message;
    } finally {
      loading.value = false;
    }
  }

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

在上面的代码中,我们使用了 ref 来定义了三个变量 loadingdata 和 error,并将其都初始化为 null 或 false。这些变量会在进行 Ajax 请求时发生变化。

async function get(url) 表示我们需要传入一个 URL 进行 Ajax 请求。然后,我们将 loading 设置为 true,表示我们正在进行 Ajax 请求。我们使用 fetch 函数进行 Ajax 请求并等待响应,然后我们将响应数据赋值给 data

如果出现错误,我们会将错误消息赋值给 error,然后再将 loading 设置为 false,表示 Ajax 请求已完成。

最后,我们将 loadingdataerror 和 get 作为一个对象返回,以便在组件中调用。

以下是如何在组件中使用封装好的 get 方法:

import { useHttp } from '../utils/http';

export default {
  setup() {
    const { loading, data, error, get } = useHttp();

    onMounted(() => {
      get('http://localhost:3000/data').then(() => {
        console.log(data.value);
      });
    });

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

在组件中,我们通过 useHttp 方法获取了 loadingdataerror 和 get,然后在 onMounted 生命周期钩子中调用 get 方法来获取数据。在 get 方法完成后,我们可以通过 data 访问获取到的数据。如果发生错误,我们可以通过 error 访问错误消息,并在需要时显示错误消息。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值