近日学习总结2

#近日学习总结

• 之前遇上的小错误
  1. 关于axios拦截器
     之前在有token的情况下使用没问题，回来退出登陆之后报错
     (Cannot read property ‘cancelToken‘ of undefined)
     然后发现是因为在没有token的情况下没有去return config;

     axios.interceptors.request.use(function (config) {
     let token = window.localStorage.getItem("token")
     if (token) {
         config.headers.token = token;   
         return config;
     } else {
         return config;   //无论怎么样都必须返回config
     }
     }, function (error) {
     return Promise.reject(error);
     });
     

  2. 使用axios实现下载文件功能时，可以获取文件但是获取到的文件是乱码，也（以为自己）已经在axios的config配置responseType：‘blob’ 了，后翻阅文档后发现问题。
     axios在get请求当中，config 是第二个参数，而在 post 里 config 其实是第三个参数！！！我之前一直把confgi放在第二个参数的位置

         axios.post('/passage/downResources?filePath='+data,data,{
         responseType: 'blob',
         }).then(
         function(res) {
         let blob = new Blob([res.data]);
         let url = window.URL.createObjectURL(blob);
         let a = document.createElement("a");
         a.href = url;
         a.download = _this.name;
         a.click();
         window.URL.revokeObjectURL(url); 
         }
         ).catch();
     

• React的使用
  1. 准备好一个“容器”
     <div id="test1"></div>
  2. 引入相关文件

     <!-- 引入react核心库 -->
     <script type="text/javascript" src="../js/react.development.js"></script>
     <!-- 引入react-dom，用于支持react操作DOM -->
     <script type="text/javascript" src="../js/react-dom.development.js"></script>
     <!-- 引入babel，用于将jsx转为js -->
     <script type="text/javascript" src="../js/babel.min.js"></script>
     <!-- 引入prop-types，用于对组件标签属性进行限制,非必须，需要时引入 -->
     <script type="text/javascript" src="../js/prop-types.js"></script>
     

  3. 创建组件，然后渲染组件到页面上(组件分为函数式组件和类式组件)

     <script type="text/babel">
         //1.创建函数式组件
         function MyComponent(){
             return <h2>我是用函数定义的组件</h2>
         }
             //1.创建类式组件
             class MyComponent extends React.Component {
                 render(){
                     return <h2>我是用类定义的组件</h2>
                 }
             }
         //2.渲染组件到页面
         ReactDOM.render(<MyComponent/>,document.getElementById('test'))
     </script>
     

• React组件的三大核心属性
  1. state
     React通过更新组件的state来更新对应的页面显示(重新渲染组件)
  2. props
     用于从组件外部获取数据，而且 props 是不可变的（函数组件中唯一能使用的，但是听说之后学到的hooks可以让函数组件使用另外两个属性）
  3. refs
     组件内的标签可以定义ref属性来标识自己（之前学的vue也有这玩意诶），可以获取DOM元素进行一些事件处理等
     • 有字符串形式的ref
       <input ref="input1"/>
     • 回调形式的ref
       <input ref={(c)=>{this.input1 = c}}/>
     • 用createRef创建ref容器

     myRef = React.createRef() 
     <input ref={this.myRef}/>