前端杂学

1. promise 例子

var p = new Promise(function (resolve, reject) {
    axios.get('users/info').then((res)=>{
        if (res.status==200) {
            if(res.data.code==0){
                that.props.loadData(res.data)
                resolve(res.data.data.type);
            }else{
                that.props.history.push('/login')
            }
        }
    })
}).then(function (data) {
    to = `1+${data}`  
    return Promise.resolve(to);                         
}).then(function (data) {
    console.log(data)                        
})

2. async和awit的用法

//定义一个async函数
async function pageDir(pos){
    let pd =''
    //同步执行axios请求
    let res = await axios.get('users/info')
    if(res.data.code==0 && res.data.data.type==pos){
        pd = true
    }
    return pd
}

3. react 路由传参

方式 一：
         通过params
        1.路由表中    

              <Route path=' /sort/:id '   component={Sort}></Route>
　　　　　　　　　　　
        2.Link处        
            HTML方式
                 <Link to={ ' /sort/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>          　　　　
　　　　　　　　　　　
          JS方式
                this.props.router.push(  '/sort/'+'2'  )
　　　　　　　　　　　
        3.sort页面       
               通过  this.props.params.id        就可以接受到传递过来的参数（id）
　　　　　　　　　　　
   方式 二：
         通过query
                前提：必须由其他页面跳过来，参数才会被传递过来
　　　     注：不需要配置路由表。路由表中的内容照常：<Route path='/sort' component={Sort}></Route>
        1.Link处      
         HTML方式
            <Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>
　　　　　　　　　　
       JS方式
            this.props.router.push({ path : '/sort' ,query : { name: ' sunny'} })

        2.sort页面     
              this.props.location.query.name

     方式 三：
        通过state
            同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏
        1.Link 处      
          HTML方式：
                <Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
                                　　
         JS方式：
            this.props.router.push({ pathname:'/sort',state:{name : 'sunny' } })
                              　　  
        2.sort页面       
            this.props.location.state.name

4.react使用settimeout

filter: function() {  
        if(this.timer){
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(()=>{
            this.props.onInput(  
                this.refs.input.value,  
            );  
        },800); 
}

5.有必要补充一下样式和动画的知识

如何做一个完美的pc端响应式布局?
1.把主要的内容margin:0 auto
2.用flex布局记得父元素定宽不然很尴尬
3.不兼容flex的用postion

css动画的tranistion是过渡的过程，因此要有始有终。
对于复杂的动画就用关键帧@keyframe

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

6.回顾一下异步与回调

什么叫同步？ a函数执行完了b函数执行
什么叫异步？ a函数还没完全执行完b函数插队了

具体方法很多，举个例子，回调实现异步。

a(cb){
    alert(1);
    cb()
    alert(2);
}
b（）{
    alert(3);
}

a(b) // 1 3 2 代表b的3插队了