在使用Vue進行開發的過程中,我們必然會遇到一些需要重復請求的場景,比如搜索、翻頁等。如果每次都重新發送一次請求,不僅會降低用戶的體驗,也會增加服務器的負擔。那么該如何解決這個問題呢?本文將介紹如何利用Vue的一些功能實現重復上次請求。
//方式一:使用閉包
let lastParams={} //記錄上次請求參數
let lastResult=null //記錄上次請求結果
function search(params){
if(JSON.stringify(params)===JSON.stringify(lastParams)){
//和上次請求參數一樣,直接返回上次請求結果即可
return Promise.resolve(lastResult)
}else{
return axios.get('/search',{params}).then(result=>{
lastParams=params
lastResult=result
return Promise.resolve(result)
})
}
}
//使用方式
search({page:1,pageSize:10}).then(result=>{
console.log(result)
})
search({page:1,pageSize10}).then(result=>{
console.log(result) //會輸出第一次請求的結果
})
提供一種利用閉包實現的方式,通過記錄上次請求參數和結果,判斷當前請求是否需要重新發送。如果需要,就發送新的請求并更新記錄,否則返回上次的結果。
//方式二:利用Vue的computed屬性- {{item.name}}
在Vue中,我們可以利用computed屬性的特性,將結果解析并處理成需要的數據格式。如上代碼所示,在搜索框輸入內容后,通過watch監聽keyword變化,然后調用search方法發起ajax請求。在請求成功后,將結果賦值給result,觸發computed更新,并返回處理后的數組。
雖然兩種方式實現的效果一樣,但使用computed更加符合Vue的設計思想,具有更高的可讀性和可維護性。通過觀察數據的變化,計算得到所需數據,這就是Vue的精髓所在。
上一篇c 里新建json
下一篇vue 配置域名訪問