javascript vue.js 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 访问错误消息，并在需要时显示错误消息。

推荐文章

 您阅读本篇文章共花了：