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

文章目录[隐藏]

虽然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;
})

 

为您推荐

Leave a Reply

Your email address will not be published. Required fields are marked *