面试题：Vue组件封装网络请求时如何应对复杂的依赖管理与异步流程控制

Question

在一个大型Vue项目中，组件封装的网络请求可能存在复杂的依赖关系，比如A接口的返回数据是B接口请求的参数，同时可能有多个网络请求需要并行或串行执行。请详细描述如何设计网络请求封装，以有效管理这些依赖关系和异步流程控制，避免出现竞态条件和回调地狱，并且给出一个具有代表性的示例代码结构和关键逻辑实现。

Answer 1

1. 使用 Promise 和 async/await

• 原理：Promise 是 JavaScript 中处理异步操作的一种方式，通过链式调用.then()方法来处理成功和失败的情况，避免回调地狱。async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码，提高代码的可读性。

2. 设计网络请求封装

• 封装单个请求：
  • 使用axios（以axios为例，其他库类似）进行网络请求封装。例如：

import axios from 'axios';

// 封装单个请求
function request(url, method = 'get', data = null) {
  return new Promise((resolve, reject) => {
    const config = {
      url,
      method,
      data
    };
    axios(config)
    .then(response => {
        resolve(response.data);
      })
    .catch(error => {
        reject(error);
      });
  });
}

• 处理依赖关系：
  • 对于 A 接口返回数据作为 B 接口请求参数的情况，使用 async/await 进行顺序调用。例如：

async function getDataWithDependency() {
  try {
    // 调用 A 接口
    const resultA = await request('/api/a');
    // 使用 A 接口的结果调用 B 接口
    const resultB = await request('/api/b', 'post', resultA);
    return resultB;
  } catch (error) {
    console.error('请求出错:', error);
  }
}

• 并行执行请求：
  • 使用Promise.all来并行执行多个网络请求。例如：

async function parallelRequests() {
  try {
    const request1 = request('/api/request1');
    const request2 = request('/api/request2');
    const results = await Promise.all([request1, request2]);
    return results;
  } catch (error) {
    console.error('并行请求出错:', error);
  }
}

• 串行执行请求：
  • 可以将多个请求放入数组，然后通过reduce方法依次执行。例如：

async function serialRequests() {
  const requests = [
    () => request('/api/request1'),
    (result1) => request('/api/request2', 'post', result1),
    (result2) => request('/api/request3', 'put', result2)
  ];
  return requests.reduce((promiseChain, currentRequest) => {
    return promiseChain.then(previousResult => currentRequest(previousResult));
  }, Promise.resolve());
}

3. 在 Vue 组件中使用

• 在 Vue 组件的方法中调用这些封装好的函数。例如：

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

<script>
import { request, getDataWithDependency, parallelRequests, serialRequests } from './api';

export default {
  data() {
    return {
      result: null
    };
  },
  methods: {
    async fetchData() {
      // 调用有依赖关系的请求
      this.result = await getDataWithDependency();
      // 调用并行请求
      const parallelResult = await parallelRequests();
      console.log('并行请求结果:', parallelResult);
      // 调用串行请求
      const serialResult = await serialRequests();
      console.log('串行请求结果:', serialResult);
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

通过上述方式，可以有效管理网络请求的依赖关系和异步流程控制，避免竞态条件和回调地狱。