如何在Vue项目中封装一个带有自定义请求头的AJAX请求函数？不使用axios

在 Vue 项目中，如果没有使用 axios 等现成的 HTTP 库，我们可以手写一个基本的 AJAX 请求函数，同时包含自定义请求头。以下是一个简单的示例：

// 创建一个 Vue 实例的方法
export function makeRequest(url, method = 'GET', data = {}, headers = {}) {
  const xhr = new XMLHttpRequest();
  
  // 添加自定义请求头
  for (let header in headers) {
    xhr.setRequestHeader(header, headers[header]);
  }

  xhr.open(method, url, true);
  xhr.onload = function () {
    if (xhr.status === 200) {
      return JSON.parse(xhr.responseText);
    } else {
      throw new Error(`Request failed with status ${xhr.status}`);
    }
  };

  xhr.onerror = function () {
    console.error('Request failed');
  };

  if (method.toLowerCase() === 'get') {
    xhr.send(); // 对于 GET 请求，直接发送
  } else if (method.toLowerCase() === 'post' || method.toLowerCase() === 'put' || method.toLowerCase() === 'delete') {
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); // 设置 Content-Type
    xhr.send(JSON.stringify(data)); // 对于其他 POST、PUT、DELETE 等请求，需要发送数据
  }
}

// 使用示例
const apiUrl = '/api/your-endpoint';
makeRequest(apiUrl, 'POST', { key: 'value' }, { Authorization: 'Bearer your-token' });

在这个例子中，`makeRequest` 函数接收 URL、HTTP 方法、数据以及自定义头部作为参数，并通过 XMLHttpRequest 对象发起请求。确保在实际项目中处理好错误和响应解析。