面试题：Vue3 Composition API结合微前端处理复杂网络请求场景

设计思路

网络请求共享与统一管理：使用Composition API中的provide和inject机制，在根微前端提供一个统一的网络请求服务。不同微前端通过inject获取该服务，从而实现共享。
异常处理：在网络请求服务内部统一处理异常，例如通过try - catch块捕获异常，并将异常信息进行统一处理，如记录日志、提示用户等。
微前端通信与数据隔离：利用Vuex或mitt等库进行微前端之间的通信。在网络请求时，要确保不同微前端的数据隔离，例如通过不同的请求前缀或者请求头来区分。

关键代码片段

创建网络请求服务

import axios from 'axios';

const useNetworkService = () => {
  const baseURL = 'https://your - api - base - url';
  const instance = axios.create({
    baseURL
  });

  instance.interceptors.response.use(
    response => response,
    error => {
      // 统一异常处理
      console.error('Network error:', error);
      // 可以在这里进行提示用户等操作
      return Promise.reject(error);
    }
  );

  const request = (config) => instance.request(config);

  return {
    request
  };
};

export default useNetworkService;

在根微前端提供服务

<template>
  <div id="app">
    <router - view></router - view>
  </div>
</template>

<script setup>
import { provide } from 'vue';
import useNetworkService from './useNetworkService';

const networkService = useNetworkService();
provide('networkService', networkService);
</script>

在子微前端注入并使用服务

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const networkService = inject('networkService');

const fetchData = async () => {
  try {
    const response = await networkService.request({
      url: '/your - api - endpoint',
      method: 'get'
    });
    console.log('Response:', response.data);
  } catch (error) {
    // 异常已经在网络请求服务中处理过，这里可以根据需要进行额外处理
  }
};
</script>

微前端通信与数据隔离（以Vuex为例）

在根微前端配置Vuex

import { createStore } from 'vuex';

const store = createStore({
  state: {
    // 可以在这里存储与网络请求相关的全局状态，如当前用户信息，用于添加到请求头
    userInfo: null
  },
  mutations: {
    setUserInfo(state, info) {
      state.userInfo = info;
    }
  }
});

export default store;

在网络请求服务中使用Vuex数据实现数据隔离

import axios from 'axios';
import { useStore } from 'vuex';

const useNetworkService = () => {
  const baseURL = 'https://your - api - base - url';
  const instance = axios.create({
    baseURL
  });

  const store = useStore();

  instance.interceptors.request.use(config => {
    // 根据Vuex中的用户信息添加请求头，实现数据隔离
    if (store.state.userInfo) {
      config.headers['Authorization'] = `Bearer ${store.state.userInfo.token}`;
    }
    return config;
  }, error => {
    return Promise.reject(error);
  });

  instance.interceptors.response.use(
    response => response,
    error => {
      console.error('Network error:', error);
      return Promise.reject(error);
    }
  );

  const request = (config) => instance.request(config);

  return {
    request
  };
};

export default useNetworkService;

星途面试题库

面试题：Vue3 Composition API结合微前端处理复杂网络请求场景

知识考点

面试题答案

设计思路

关键代码片段