javascript undefined_setvalidator

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

问题描述

今天写一个取消收藏的功能遇到问题。

取消收藏的流程是这样的：点击取消收藏后会做unshare的请求对项目取消收藏，等请求结束后会弹出窗口提示成功取消，然后发送获取收藏的请求，更新收藏内容状态。这时候出现了一个问题，当我对一个项目进行取消收藏后，更新过来的内容里还是有我取消的那个项目。开始以为是取消收藏失败了，但刷新之后重新获取的收藏内容里又成功了。

通过多次尝试后发现，是因为取消收藏这个api太慢了，点击取消后获取全部收藏没能快速反应过来。

所以想到拿到total这个参数，然后判断请求过来的总数有没有变化，变化了在更新收藏内容。

异步拿到收藏

这样就得写两个effects了，刚进入收藏页面的时候通过api拿到所有收藏；然后点击取消收藏后，触发取消收藏api，这时候yield put到新的effects：aftergetcollection。

 *aftergetcollection({ 
    payload},{ 
    call,put}){ 
   
      //请求收藏的项目
         let res
         res=yield call(Middleware.getcollection,[payload[0],payload[1]])
             
           let timer= setInterval(()=>{ 
   
                if(res.data.total<payload[2]){ 
   
            yield put({ 
   
               type:'createcollection',
               token:payload[1],
               total:res.data.total,
               payload:res.data.results,
               page:"1",
             })
           }
              },1000)
    },

通过 setInterval 不断判断total是否比之前的少，如果判断正确跳到同步的createcollection，然后找一个时机 clearInterval() 就行了。

然而这样做肯定是不对的
编译器直接报错了。原因很简单，因为yield表达式只能用在 Generator 函数里面。那么在effects中就无法使用 setTimout() 和 setInterval() 这样的函数了。

在Effects中做循环

其实想要在models中做定时器和循环很简单，yield提供的put方法就是一个很好的循环方法，只需要对effects自身做put,就可以无限的循环了，但是循环的速度很快会对性能造成影响，所以接下来解决定时器的问题就可以了。

 *aftergetcollection({ 
    payload},{ 
    call,put}){ 
   
      //请求收藏的项目
         let res
         res=yield call(Middleware.getcollection,[payload[0],payload[1]])
            if(res.data.total<payload[2]){ 
   
            yield put({ 
   
               type:'createcollection',
               token:payload[1],
               total:res.data.total,
               payload:res.data.results,
               page:"1",
             })
           }else{ 
   
           //对effects自身put
             yield put({ 
   
               type:"aftergetcollection",
               payload:payload
             })
           }
    },

models的定时器的方法其实可以在外侧写，在顶部定义一个常量delay，然后在里面写一个setTimeout的方法

const delay = (timeout) => { 
   
  return new Promise(resolve => { 
   
    setTimeout(resolve,timeout)
  })
}

然后在effects中call这个方法，设定延迟1秒就可以了

  yield call(delay, 1000)
             yield put({ 
   
               type:"aftergetcollection",
               payload:payload
             })

完整代码：

const delay = (timeout) => { 
   
  return new Promise(resolve => { 
   
    setTimeout(resolve,timeout)
  })
export default { 
   
  namespace:"collectioninfo",
  state:{ 
   
     ...
  },
   effects:{ 
   
 *aftergetcollection({ 
    payload},{ 
    call,put}){ 
   
      //请求收藏的项目
         let res
         res=yield call(Middleware.getcollection,[payload[0],payload[1]])
           if(res.data.total<payload[2]){ 
   
            yield put({ 
   
               type:'createcollection',
               token:payload[1],
               total:res.data.total,
               payload:res.data.results,
               page:"1",
             })
           }else{ 
   
             yield call(delay, 1000)
             yield put({ 
   
               type:"aftergetcollection",
               payload:payload
             })
           }
    },
}
}