vue3封装ajax_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 来定义了三个变量 loading、data 和 error，并将其都初始化为 null 或 false。这些变量会在进行 Ajax 请求时发生变化。

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

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

最后，我们将 loading、data、error 和 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 方法获取了 loading、data、error 和 get，然后在 onMounted 生命周期钩子中调用 get 方法来获取数据。在 get 方法完成后，我们可以通过 data 访问获取到的数据。如果发生错误，我们可以通过 error 访问错误消息，并在需要时显示错误消息。