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插队了