vue axios拦截code判断

### 使用 Axios 拦截器处理响应码 在 Vue 项目中，可以利用 `axios` 的拦截器功能来捕获所有的 HTTP 请求和响应，并基于响应的状态码执行特定逻辑。这不仅有助于集中管理错误处理，还能简化组件内的业务逻辑。 #### 创建 Axios 实例并配置全局默认设置 为了更好地管理和扩展 API 调用，建议创建一个新的 Axios 实例而不是直接使用导入的 `axios` 对象： ```javascript // src/utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api base_url timeout: 5000 // request timeout }); ``` #### 添加请求与响应拦截器 接下来定义两个拦截器分别用于修改发出前的请求以及接收到服务器回复后的响应对象。对于响应来说，可以根据状态码来做不同的事情，比如刷新 token 或者提示用户网络异常等操作。 ```javascript // 处理请求之前的拦截 service.interceptors.request.use( config => { // 可在此处添加 loading 层或公共头部信息 return config; }, error => { Promise.reject(error); } ); // 响应到达之后做些事 service.interceptors.response.use( response => { const res = response.data; // 如果自定义code不是20000，则认为是有错发生 if (res.code !== 20000) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }); // 特殊情况下的处理... return Promise.reject(new Error(res.message || 'Request failed')); } else { return res; } }, error => { console.error('err' + error); // for debug let msg = ''; if (error && error.response) { switch (error.response.status) { case 400: msg = '请求有误'; break; case 401: msg = '未授权，请登录'; break; case 403: msg = '拒绝访问'; break; case 404: msg = `${error.response.config.url} 请求地址不存在`; break; case 500: msg = '服务器内部错误'; break; default: msg = '连接到服务器失败'; } Message({ message: msg, type: 'error', duration: 5 * 1000 }); } return Promise.reject(error); } ); ``` 上述代码展示了如何根据不同的HTTP状态码显示相应的消息给用户[^3]。 #### 将服务暴露出去供其他模块使用 最后一步是导出这个封装好的 `service` ，以便可以在整个应用程序中的任何地方轻松地发起API调用而无需重复相同的配置过程。 ```javascript export default service; ``` 现在每当从某个组件内调用此实例的方法时（如 `.get()` 或 `.post()`），都会自动经过这些中间件来进行预处理和后置处理[^4]。