axios封装对文件流进行报错处理

      if (response.config.responseType === 'blob') {
        let data = response.data
        const reader = new FileReader()
        reader.readAsText(data, 'utf-8')
        reader.addEventListener('loadend', function () {
          if (typeof reader.result === 'string') {
            try {
              data = JSON.parse(reader.result)
              if (data.code === '500') {
                Message.error(data.msg || '未知异常')
              }
              if (data.code !== '500' && data.code !== '9999') {
                Message.warning(data.msg || '未知异常')
              }
            } catch (error) {
              console.log('捕捉到json错误 :>> ', error)
            }
          }
        })
      }
### 封装 Axios 并导出的最佳实践 为了提高项目的可维护性和代码的重用率,在项目中通常会创建一个独立文件来配置和封装 `Axios` 实例。这允许开发者自定义请求拦截器、响应拦截器以及设置默认参数等,从而简化后续 API 请求调用。 #### 创建 Axios 配置实例 在 JavaScript 或 TypeScript 项目中,可以新建一个名为 `apiClient.js` 或者类似的文件用于初始化 Axios 客户端: ```javascript // apiClient.js import axios from 'axios'; const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL || 'http://localhost:8000/api/', timeout: 5000, }); export default instance; ``` 此部分设置了基础 URL 和超时时间,并且可以通过环境变量灵活调整服务器地址[^1]。 #### 添加请求与响应拦截器 增强版的封装还可以加入请求前后的处理逻辑,比如自动携带 token 进行身份验证或者统一处理错误信息: ```javascript instance.interceptors.request.use( (config) => { const accessToken = localStorage.getItem('access_token'); if (accessToken) { config.headers.Authorization = `Bearer ${accessToken}`; } return config; }, (error) => Promise.reject(error) ); instance.interceptors.response.use( (response) => response.data, // 只返回 data 字段给业务层 async (error) => { console.error('API Error:', error); throw new Error(`Request failed with status code ${error?.response?.status}`); } ); ``` 这段代码实现了对每次 HTTP 请求添加认证头的操作,并且当遇到服务端异常时提供更友好的报错方式[^2]。 #### 导入并使用封装后的 Axios 完成上述步骤之后,在其他模块里只需要简单导入这个定制化的 Axios 实例即可发起网络请求: ```javascript import apiInstance from './path/to/apiClient'; async function fetchData() { try { const result = await apiInstance.get('/endpoint'); console.log(result); // 处理成功情况下的数据 } catch (err) { console.error(err.message); // 输出失败情况下捕获到的信息 } } ``` 这样做的好处在于所有的全局配置都被集中在一处管理,减少了重复劳动的同时也降低了潜在的风险点[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值