axios封装请求头

### 使用 Axios 进行请求头封装实现自定义配置 #### 设置全局默认值 为了确保每次发送 HTTP 请求时都能自动应用特定的头部信息和其他配置项，可以利用 `axios` 提供的 `.defaults` 属性来设定全局性的默认选项。这包括但不限于指定 Content-Type、超时时长以及跨域资源共享(CORS)策略等内容。 ```javascript // 设定全局默认配置 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.timeout = 60000; axios.defaults.crossDomain = true; ``` #### 添加自定义请求头 除了基本的全局配置外，在某些场景下可能还需要针对具体的 API 接口添加额外的信息至请求头内。比如当涉及到分页查询时，则可以在 headers 中加入 pageable 字段表示当前页面是否支持分页功能[^4]。 ```javascript if (config.pageable !== undefined && config.pageable !== null){ config.headers['pageable'] = config.pageable || false; } ``` #### 创建拦截器处理逻辑 为了让代码更加模块化易于维护，通常会创建两个拦截器分别用来修改即将发出的数据包（即 request 拦截器），还有就是接收服务器响应之后再做进一步加工前的操作（response 拦截器）。这里展示了一个简单的例子说明怎样在发起请求之前向 header 加入 token 或其他认证凭证，并且开启加载动画；而在接收到回复后则隐藏该提示框[^2]。 ```javascript // Request Interceptor axios.interceptors.request.use( function(config) { const token = localStorage.getItem('token'); if(token){ config.headers.Authorization = `Bearer ${token}`; } startLoading(); // 显示 loading return config; }, function(error) { stopLoading(); // 错误情况下也要停止 loading return Promise.reject(error); } ); // Response Interceptor axios.interceptors.response.use( response => { stopLoading(); return response; }, error => { stopLoading(); return Promise.reject(error); } ); ``` #### 初始化项目时注册函数 最后一步是在应用程序启动之初就执行一次初始化操作，从而保证后续所有的网络通信都能够按照预期的方式工作。例如可以通过调用某个方法去获取存储于本地缓存里的用户身份验证令牌等重要资料作为请求的一部分提交给服务端进行校验[^3]。 ```javascript import { setStorageHeaders } from './path/to/setStorageHeaders'; function initApp() { setStorageHeaders(); } initApp(); ```

<think>嗯，用户想知道如何用Axios封装HTTP请求，需要示例代码和最佳实践。首先，我需要回忆一下Axios的基本用法和封装方法。记得Axios是基于Promise的HTTP库，可以在浏览器和Node.js中使用。封装Axios主要是为了提高代码复用性，统一处理请求和响应，比如添加拦截器、设置默认配置等。 用户提供的引用中有几个关键点。引用1提到设置请求头为application/x-www-form-urlencoded，引用3提到了设置超时时间和baseURL。引用2和4讨论了封装步骤，包括创建实例、拦截器、封装请求方法。这些信息需要整合到回答中。 首先，应该创建Axios实例，这样可以针对不同API地址或配置进行定制。然后，请求拦截器可以用来添加token或者修改请求参数，响应拦截器处理全局错误，比如401跳转登录。接着，封装GET、POST等方法，让调用更简便。另外，文件上传是常见需求，需要特别处理，比如使用FormData，这在引用2中提到了。 最佳实践部分，要包括环境配置管理、错误处理、取消请求、安全措施如防御XSRF。引用3和4提到设置baseURL和超时，还有自动转换JSON，这些都很重要。另外，接口地址统一管理可以维护更方便，引用2也提到了这一点。 用户可能遇到的问题包括如何统一处理错误，如何上传文件，如何添加加载状态。回答中需要覆盖这些点，并提供代码示例。比如，在拦截器中统一处理401，在文件上传时使用FormData，并设置正确的Content-Type为multipart/form-data。 还需要注意示例代码的正确性，比如使用async/await或者Promise语法，导出封装好的请求方法供组件调用。同时，要提到TypeScript支持，因为现在很多项目用TS，引用4提到Axios的特性，可能用户需要类型提示。 最后，相关问题部分要引导用户深入，比如性能优化、拦截器高级用法、文件上传细节等。这些帮助用户进一步学习和解决问题。 现在整理步骤：创建实例，配置默认参数；添加请求拦截器（比如加token）；响应拦截器处理错误；封装通用方法；示例使用；文件上传处理；最佳实践。每个部分结合引用内容，确保信息准确。 检查是否遗漏了引用中的要点，比如引用3中的超时设置和baseURL，引用2中的接口地址管理。确保回答结构清晰，分步骤说明，代码示例正确，并标注引用来源。</think>### 分步解析Axios请求封装 #### 一、创建Axios实例 通过自定义配置创建独立实例，实现不同接口的差异化配置： ```javascript // 创建基础实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 环境变量管理接口地址[^3] timeout: 10000, // 全局超时设置（单位：毫秒） headers: { 'X-Custom-Header': 'foobar' } }) ``` #### 二、拦截器配置 1. **请求拦截器**：统一处理鉴权、参数格式化 ```javascript service.interceptors.request.use( config => { // 注入token示例 if (store.getters.token) { config.headers['Authorization'] = `Bearer ${getToken()}` } // POST参数序列化处理 if (config.method === 'post') { config.data = qs.stringify(config.data) config.headers['Content-Type'] = 'application/x-www-form-urlencoded' // 符合RESTful规范[^1] } return config }, error => Promise.reject(error) ) ``` 2. **响应拦截器**：统一错误处理 ```javascript service.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { // 业务逻辑错误处理 ElMessage.error(res.message || 'Error') return Promise.reject(new Error(res.message || 'Error')) } return res }, error => { // HTTP状态码处理 if (error.response.status === 401) { router.push('/login') } ElMessage.error(error.message) return Promise.reject(error) } ) ``` #### 三、封装请求方法 ```javascript // 封装GET请求 export function get(url, params) { return service({ method: 'get', url, params }) } // 封装POST请求 export function post(url, data) { return service({ method: 'post', url, data }) } // 文件上传特殊处理 export function uploadFile(url, file) { const formData = new FormData() formData.append('file', file) return service.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' // 必须设置正确的MIME类型[^2] } }) } ``` #### 四、组件调用示例 ```javascript import { get, post, uploadFile } from '@/utils/request' // 获取用户列表 const fetchUsers = async () => { try { const res = await get('/api/users', { page: 1 }) console.log(res.data) } catch (err) { console.error(err) } } // 上传文件示例 const handleUpload = async (file) => { const res = await uploadFile('/api/upload', file) console.log('文件地址:', res.fileUrl) } ``` ### 最佳实践建议 1. **环境配置分离** 通过`.env`文件管理不同环境的接口地址： ``` VUE_APP_BASE_API = 'https://api.example.com' VUE_APP_TIMEOUT = 10000 ``` 2. **类型安全（TypeScript）** 为请求方法添加类型声明： ```typescript interface ResponseData<T = any> { code: number data: T message?: string } export function get<T>(url: string, params?: any): Promise<ResponseData<T>> { // ... } ``` 3. **请求取消机制** 使用CancelToken避免重复请求： ```javascript const CancelToken = axios.CancelToken let cancel service.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { cancel = c }) }) // 取消请求 cancel() ``` 4. **安全加固** 防御XSRF攻击： ```javascript axios.defaults.xsrfCookieName = 'csrftoken' axios.defaults.xsrfHeaderName = 'X-CSRFToken' ``` 5. **性能监控** 添加请求耗时统计： ```javascript service.interceptors.request.use(config => { config.metadata = { startTime: Date.now() } return config }) service.interceptors.response.use(response => { const duration = Date.now() - response.config.metadata.startTime console.log(`请求耗时：${duration}ms`) return response }) ``` ### 常见问题处理方案 1. **大文件分片上传** 通过`Blob.slice`实现分片上传： ```javascript const CHUNK_SIZE = 2 * 1024 * 1024 // 2MB async function uploadLargeFile(file) { let chunkNumber = 0 const totalChunks = Math.ceil(file.size / CHUNK_SIZE) while (chunkNumber < totalChunks) { const chunk = file.slice( chunkNumber * CHUNK_SIZE, (chunkNumber + 1) * CHUNK_SIZE ) const formData = new FormData() formData.append('file', chunk) formData.append('chunkNumber', chunkNumber) formData.append('totalChunks', totalChunks) await post('/upload/chunk', formData) chunkNumber++ } } ``` 2. **请求重试机制** 实现自动重试逻辑： ```javascript service.interceptors.response.use(null, async error => { const config = error.config if (!config.retry) config.retry = 0 if (config.retry < 3) { config.retry += 1 await new Promise(resolve => setTimeout(resolve, 1000)) return service(config) } return Promise.reject(error) }) ``` 3. **接口文档生成** 通过JSDoc生成API文档： ```javascript /** * 获取用户信息 * @param {number} userId - 用户ID * @returns {Promise<UserInfo>} 用户信息对象 */ export function getUserInfo(userId) { return get(`/users/${userId}`) } ```