统一配置请求参数-减少重复配置的工作-指秘技妙
一、统一配置请求参数
封装Axios的第一个好处就是统一配置请求参数。这样，每个请求都会有一个统一的设置，比如基础URL、超时时间和请求头等。这样做的目的是让每个请求看起来都差不多，减少重复配置的工作。
| 配置项 | 说明 |
|---|---|
| baseURL | 设置基础URL，所有请求都会在这个基础上进行拼接。 |
| timeout | 请求超时时间，防止请求挂起。 |
| headers | 统一设置请求头，例如设置Content-Type、Authorization等。 |
示例代码
```javascript // 假设这是你的Axios配置 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 10000; axios.defaults.headers.common['Content-Type'] = 'application/json'; // 然后你的请求就变得很简单了 axios.get('/data').then(response => { // 处理响应 }).catch(error => { // 处理错误 }); ```二、处理请求和响应拦截器
拦截器是Axios的强大功能之一，可以在请求发送前和响应接收后进行操作。这可以帮助我们在全局范围内处理一些通用逻辑，比如添加Token或者统一处理错误。
| 拦截器类型 | 操作时机 | 功能 |
|---|---|---|
| 请求拦截器 | 请求发送前 | 比如添加Token、修改请求参数等。 |
| 响应拦截器 | 响应接收后 | 比如处理错误、格式化数据等。 |
示例代码
```javascript // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 config.headers.Authorization = 'Bearer your-token-here'; return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); ```三、简化API调用
封装Axios还可以简化API调用，让调用HTTP请求变得简单直接。你可以创建一些函数来封装常用的API调用，这样就不需要每次都写一大堆配置代码了。
| 请求类型 | 封装方法 |
|---|---|
| GET | 封装GET请求函数 |
| POST | 封装POST请求函数 |
| PUT | 封装PUT请求函数 |
| DELETE | 封装DELETE请求函数 |
示例代码
```javascript // 封装GET请求 function getExampleData() { return axios.get('/example/data'); } // 封装POST请求 function postExampleData(data) { return axios.post('/example/data', data); } ```四、处理错误统一管理
封装Axios还可以帮助我们统一管理错误。这样，无论何时发生错误，我们都可以有一个标准的方式来处理它，从而提高用户体验和代码的健壮性。
| 错误处理步骤 | 说明 |
|---|---|
| 错误分类 | 根据错误类型进行分类处理，比如网络错误、服务器错误、业务逻辑错误等。 |
| 错误提示 | 统一显示错误提示信息，比如通过弹窗、通知等方式告知用户。 |
| 错误日志 | 记录错误日志，以便后续分析和调试。 |