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(); ```