Vue 및 서버 측 통신 분석: 동시 요청을 처리하는 방법

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
});

// 请求1
const request1 = instance.get('/users');
// 请求2
const request2 = instance.get('/orders');
// 请求3
const request3 = instance.get('/products');

// 并发发送请求
axios.all([request1, request2, request3]).then(axios.spread(function (res1, res2, res3) {
  // 请求1的响应数据
  console.log(res1.data);
  // 请求2的响应数据
  console.log(res2.data);
  // 请求3的响应数据
  console.log(res3.data);
})).catch(function (error) {
  console.log(error);
});

axios.all([request1, request2, request3]).then(axios.spread(function (res1, res2, res3) {
  // 请求1的响应数据
  console.log(res1.data);
  // 请求2的响应数据
  console.log(res2.data);
  // 请求3的响应数据
  console.log(res3.data);
})).catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('请求被取消');
  } else {
    console.log('请求发生错误');
    console.log(error);
  }
});

let cancel;

// 取消请求
function cancelRequest() {
  if (typeof cancel === 'function') {
    cancel('请求被取消');
  }
}

// 发送请求
function sendRequest() {
  cancelRequest();

  // 创建新的取消令牌
  const source = axios.CancelToken.source();

  // 发送请求
  axios.get('/search', {
    cancelToken: source.token
  }).then(function (res) {
    console.log(res.data);
  }).catch(function (error) {
    if (axios.isCancel(error)) {
      console.log('请求被取消');
    } else {
      console.log('请求发生错误');
      console.log(error);
    }
  });

  // 存储取消令牌
  cancel = source.cancel;
}