### 修改 `postAjax` 函数以支持 FormData 参数传递 为了使现有的 `postAjax` 方法能够兼容 `FormData` 和其他非 `FormData` 类型的参数，可以按照以下方式进行调整： #### 主要逻辑说明 1. 判断传入的参数是否为 `FormData` 实例。如果是，则无需额外设置请求头[^1]。 2. 如果不是 `FormData`，则需要手动序列化参数，并设置合适的请求头（如 `Content-Type: application/x-www-form-urlencoded` 或 JSON 格式）[^3]。 3. 封装 URL 构建和参数序列化的功能，确保无论是 GET 还是 POST 请求都能正常工作[^4]。 以下是修改后的代码实现： ```javascript function postAjax(url, data, method = 'POST', headers = {}) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); // 设置默认 Content-Type 头部 let defaultHeaders = {}; if (!(data instanceof FormData)) { // 非 FormData 数据需显式指定头部 defaultHeaders['Content-Type'] = 'application/json'; // 默认使用 JSON } Object.assign(defaultHeaders, headers); // 序列化数据 function serializeData(dataParam) { if (dataParam instanceof FormData) { return dataParam; } else if (typeof dataParam === 'object') { return JSON.stringify(dataParam); } else { throw new Error('Unsupported data type'); } } // 发送请求 try { xhr.open(method.toUpperCase(), url, true); // 设置请求头 for (let key in defaultHeaders) { if (defaultHeaders.hasOwnProperty(key)) { xhr.setRequestHeader(key, defaultHeaders[key]); } } xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response ? JSON.parse(xhr.response) : null); } else { reject(new Error(`Server error: ${xhr.statusText}`)); } }; xhr.onerror = () => { reject(new Error('Network error')); }; // 调用 send 方法 xhr.send(serializeData(data)); } catch (error) { reject(error); } }); } ``` --- #### 关键点解释 1. **判断数据类型** 使用 `instanceof` 来检测传入的数据是否为 `FormData` 实例。如果不是，则将其转换为 JSON 字符串或其他适合的形式[^3]。 2. **动态设置请求头** 当数据为 `FormData` 时，不设置任何自定义的 `Content-Type`，因为浏览器会自动为其生成正确的 MIME 类型[^1]。对于其他类型的参数，默认采用 `application/json` 的格式。 3. **错误处理** 添加了对网络异常和服务器响应状态码的捕获机制，以便更优雅地处理失败情况。 4. **Promise 化** 返回一个基于 Promise 的接口，便于调用者链式操作或异步等待结果。 --- ### 示例用法 #### 使用普通对象作为参数 ```javascript const postData = { name: 'John Doe', age: 30 }; postAjax('/api/user', postData) .then(response => console.log('Success:', response)) .catch(error => console.error('Error:', error)); ``` #### 使用 FormData 上传文件和其他字段 ```javascript const formData = new FormData(); formData.append('file', document.querySelector('#fileInput').files[0]); formData.append('name', 'Sample File'); postAjax('/upload', formData) .then(response => console.log('File uploaded successfully:', response)) .catch(error => console.error('Upload failed:', error)); ``` --- ###