程沛权
程沛权

解决axios的responseType为"json"时IE9报undefined的兼容办法

作者:程沛权2018-10-20

本文最后更新于 1946 天前,部分内容可能不适合当前所有情况,仅供参考。

虽然 axios 说可以兼容 IE9,但实际上在项目开发过程中,IE9 报错,而且目前的情况是 responseType 为"json"时才会报这个异常。

定位问题:

因为 IE9 下,指定 json 格式的请求,response 只返回 responseText,而其他浏览器都可以正常返回 data

相关请求代码大致如下:

// main.js
import axios from 'axios'
Vue.prototype.$ajax = axios

// xxx.vue组件内请求接口
this.$ajax({
  // …
  responseType: 'json',
})
  .then((response) => {
    // 虽然请求成功,但并不会进入这里
  })
  .catch((error) => {
    // 而是直接报错
  })

解决方案:

解决方案也很简单,判断接口返回的数据是否正常,如果请求 json 格式返回的 data 为空,则将响应数据指向 responseText。

经过搜索发现将以下代码添加至 main.js 即可解决该异常,很好用!感恩 Github,附上 issue 原文链接。

https://github.com/axios/axios/issues/265#issuecomment-333014355

// 处理axios在IE下的坑爹问题
axios.interceptors.response.use((response) => {
  // IE 8-9
  if (
    response.data == null &&
    response.config.responseType === 'json' &&
    response.request.responseText != null
  ) {
    try {
      // eslint-disable-next-line no-param-reassign
      response.data = JSON.parse(response.request.responseText)
    } catch (e) {
      // ignored
    }
  }
  return response
})