解决TypeError:Cannot read properties of undefined并深入解读TypeError错误类型

最新推荐文章于 2025-03-07 22:43:24 发布

DazzlingWen.

最新推荐文章于 2025-03-07 22:43:24 发布

阅读量6.4w

点赞数 6

文章标签：大数据

本文链接：https://blog.csdn.net/qq_52372698/article/details/125503001

版权

今儿调接口的时候报错了

引起这个报错的原因是：

post.js这个文件出了问题，加了一个get接口就报了TypeError

首先注意到这里

溯源到这个文件http.js看instance是什么

var instance = axios.create({
  timeout: 1000 * 12
});

再根据axios官方文档给出的示例Axios实例

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

所以说instance是一个自定义的axios实例对象

我们可以发现，上面的报错在于我没有在instance实例对象上挂载get方法就调用，导致报了TypeError

反其道而行，我开始思考为什么这个问题报的错为什么是TypeError而不是别的错误类型

深入研究一下TypeError

TypeError是变量或参数不是预期类型时发生的错误。比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数。

new 123 
//TypeError: number is not a func 
var obj = {}; obj.unknownMethod() 
// TypeError: undefined is not a function

应该是这样

在声明obj这个变量的时候没有unknownMethod这个方法，然后就会返回一个undefined

再通过obj.unknownMethod()这种形式去试图访问一个unknownMethod函数，但是由于undefined并不是一个函数，（这是两种数据类型，undefined是基本数据类型，而function是引用数据类型），所以报的错是undefined is not a function不就是翻译过来的话嘛，只是说报错的原理是这样解析的

所以，对于axios的instance上的get方法也是同理可得

一方面打通了axios原理，就具备了自己二次封装axios的能力，等待一次实践的机会，原生的axios有很多好东西，在复杂的业务场景中，封装一个优秀的axios会给项目带来很高的请求效率，复用性高，实用性高。