1 axios返回promise对象问题

axios源码 对返回数据做处理的源码transformData方法 axios返回promise_性能优化


打印了一下data,是个对象没问题,但是,async返回来的是一个Promise对象,即使你手动写了reutrn data,返回一个对象,async也是会包裹成一个Promise对象返回。故,你在外层想拿到数据时,有两种方法:

(1)

axios源码 对返回数据做处理的源码transformData方法 axios返回promise_css_02


使用Promise对象的.then方法来获取数据。

(2)

axios源码 对返回数据做处理的源码transformData方法 axios返回promise_数据_03

因为返回来的是一个Promise对象,故在外层可以继续使用async await去获取。

如果不用async await ,直接LET DATA = 去获取,会拿到一个处于pedding状态的Promise对象,拿不到里面的数据。

2 styled-components结合ts问题

css in js,非常灵活,甚至可以在编写组件时,将变量传进来,利用react组件的state的数据来动态更新我们的样式。如图

axios源码 对返回数据做处理的源码transformData方法 axios返回promise_数据_04


如果不懂这个语法的可以去复习下styled-components这个库。

但是当我们用TS编写时,会显示错误,

axios源码 对返回数据做处理的源码transformData方法 axios返回promise_数据_05


提示我们这个props上面没有isPlaying属性,我们可以直接编写一个接口,赋予Props,表明,我们里面就是有这么一个属性,

axios源码 对返回数据做处理的源码transformData方法 axios返回promise_性能优化_06


axios源码 对返回数据做处理的源码transformData方法 axios返回promise_css_07

这样编译器救不会报错了。

3传入组件的函数性能优化问题,

useCallback,会对传入的函数返回一个状态值,当依赖不变时,返回的值是一样的,我们知道,以前类组件时,只要调用setState函数,无论返回的state值前后是否相同,组件都会重新渲染,后来我们通过shouldComponentUpdate来比较前后的props和state,只要一样,那么就i返回false阻止渲染。现在函数组件useCallback也是同样道理,只不过该hook主要用于函数的缓存,当依赖的值不变,返回的函数都是一样的。那么这个函数传入给子组件,子组件的props不变,往往结合memo可以阻止子组件刷新,从而达到性能优化的效果.

axios源码 对返回数据做处理的源码transformData方法 axios返回promise_数据_08


但是注意,这个依赖的值,得写好,比如如果不写第一个参数,一开始是undefined,后面因为没有依赖,这个函数拿到的currentSong.dt都是undefined等等,所以依赖也得写好。