前端项目接口请求封装

封装写法一：

// 封装接口请求函数  
function request(url, method, data, headers) {  
  return new Promise((resolve, reject) => {  
    const xhr = new XMLHttpRequest();  
    xhr.open(method, url);  
      
    // 设置请求头  
    if (headers) {  
      Object.keys(headers).forEach(key => {  
        xhr.setRequestHeader(key, headers[key]);  
      });  
    }  
      
    // 监听请求完成的事件  
    xhr.onload = function() {  
      if (xhr.status >= 200 && xhr.status < 300) {  
        resolve(xhr.response);  
      } else {  
        reject(xhr.statusText);  
      }  
    };  
      
    // 监听网络错误的事件  
    xhr.onerror = function() {  
      reject("网络错误");  
    };  
      
    // 发送请求  
    if (method === "GET") {  
      xhr.send();  
    } else {  
      xhr.setRequestHeader("Content-type", "application/json");  
      xhr.send(JSON.stringify(data));  
    }  
  });  
}  
// 使用封装的接口请求函数  
const apiUrl = "https://api.example.com";  
const requestData = { key: "value" };  
request(apiUrl, "POST", requestData)  
  .then(response => {  
    console.log("请求成功", response);  
  })  
  .catch(error => {  
    console.error("请求失败", error);  
  });  

request函数封装了一个基本的接口请求逻辑，包括发送请求、处理响应和错误处理等。它接受四个参数：请求的URL、请求方法、请求数据和请求头。它返回一个Promise对象，可以使用.then和.catch方法处理请求成功和失败的情况。

封装写法二：
1. 创建一个api文件夹，用于存放接口相关文件。
2. 在api文件夹中创建一个request.js文件，用于封装接口请求函数。
3. 在request.js文件中，引入axios或其他网络请求库，然后创建一个请求实例。
4. 在请求实例中定义统一的请求拦截器，可以用于设置请求头、处理请求参数等操作。
5. 在请求实例中定义统一的响应拦截器，可以用于处理接口返回的数据格式、统一处理错误等操作。
6. 在request.js文件中，创建一个函数，例如request(url, method, data)，用于向外暴露接口请求方法。
7. 在需要发送接口请求的地方，引入request.js文件，并调用其中的接口请求方法。
以下是一个简单示例：

// api/request.js  
import axios from 'axios';  
// 创建请求实例  
const instance = axios.create({  
  baseURL: 'https://api.example.com', // 设置接口基础路径  
  timeout: 5000 // 设置请求超时时间  
});  
// 设置请求拦截器  
instance.interceptors.request.use(  
  config => {  
    // 在请求发送前进行一些操作，如设置请求头、处理请求参数等  
    return config;  
  },  
  error => {  
    // 对请求错误进行处理  
    return Promise.reject(error);  
  }  
);  
// 设置响应拦截器  
instance.interceptors.response.use(  
  response => {  
    // 对接口返回的数据进行处理，如统一处理错误码、格式化数据等  
    return response.data;  
  },  
  error => {  
    // 对响应错误进行处理  
    return Promise.reject(error);  
  }  
);  
// 暴露接口请求方法  
export default function request(url, method = 'GET', data) {  
  return instance({  
    url,  
    method,  
    data  
  });  
}  

使用示例：

// 使用接口请求  
import request from './api/request';  
request('/user', 'GET')  
  .then(response => {  
    // 处理接口返回的数据  
  })  
  .catch(error => {  
    // 处理接口请求错误  
  });