面试题：Vue基于Composition API封装网络请求函数的基础实现

封装网络请求函数：

假设使用axios库进行网络请求，首先安装axios：
```
npm install axios
```
创建一个http.js文件，封装GET请求函数：

import axios from 'axios';

export const getRequest = async (url, params = {}) => {
  try {
    const response = await axios.get(url, { params });
    return response.data;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

在Vue组件中使用：

使用Composition API的Vue组件示例：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">
      <pre>{{ data }}</pre>
    </div>
    <div v-if="error" style="color: red">{{ error.message }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getRequest } from './http.js';

const data = ref(null);
const error = ref(null);

const fetchData = async () => {
  try {
    const result = await getRequest('https://example.com/api', { key: 'value' });
    data.value = result;
  } catch (e) {
    error.value = e;
  }
};
</script>

在上述代码中，首先在http.js文件中封装了getRequest函数，用于发送GET请求并处理成功和失败的情况。然后在Vue组件中，通过fetchData方法调用这个封装的函数，并根据请求结果更新组件的响应式数据data和error，以在模板中展示请求结果或错误信息。

星途面试题库

面试题：Vue基于Composition API封装网络请求函数的基础实现

知识考点

面试题答案