面试题：Vue3 Composition API中如何封装网络请求以实现复用

安装Axios：在Vue3项目中，如果还未安装Axios，先通过npm或yarn安装。
```
npm install axios
# 或者
yarn add axios
```

创建网络请求封装文件：在项目src目录下创建一个api文件夹，然后在其中创建request.js文件。

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基础URL，可在.env文件中配置
  timeout: 5000, // 超时时间，单位毫秒
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在此处添加请求头的通用配置，例如token
    // config.headers['Authorization'] = getToken();
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    // 可以在此处对响应进行统一处理，例如判断状态码
    if (res.code!== 200) {
      // 处理错误
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    return Promise.reject(error);
  }
);

export default service;

在Composition API中使用：在需要使用网络请求的组件中，引入封装的request。

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script setup>
import request from '@/api/request';

const fetchData = async () => {
  try {
    const response = await request.get('/your - api - url');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};

fetchData();
</script>

通过以上步骤，就可以在Vue3项目的Composition API中封装并复用网络请求函数，同时可以灵活配置请求头、超时等参数。

星途面试题库

面试题：Vue3 Composition API中如何封装网络请求以实现复用

知识考点

面试题答案