如何制作营销网站模板,企业网站建公司,一个网站可以设多少关键词,外发加工会计分录描述
之前用过react的ahook很舒服#xff0c;但是vue的ahook功能太少。于是仿照react ahooks的useRequest 写的异步请求状态管理 加载更多#xff0c;成功#xff0c;加载中#xff0c;失败
示意图 测试代码
templateviewh2自动触发/h2…描述
之前用过react的ahook很舒服但是vue的ahook功能太少。于是仿照react ahooks的useRequest 写的异步请求状态管理 加载更多成功加载中失败
示意图 测试代码
templateviewh2自动触发/h2view v-ifstate.loadingloading/viewview v-else-ifstate.errorerror/viewview v-else{{state.data}}/viewview------------------------/viewh2手动触发/h2view v-ifmanualState.loadingloading/viewview v-else-ifmanualState.errorerror/viewview v-else{{manualState.data}}/viewbutton clickmanualState.run()加载数据/buttonview------------------------/viewh2局部刷新/h2view v-ifhotState.loadingloading/viewview v-else-ifhotState.errorerror/viewview v-else{{hotState.data}}text v-ifhotState.isRefresh局部刷新中/text/viewbutton clickhotState.reFresh()局部刷新/buttonview------------------------/viewh2加载更多/h2view v-iflistState.loadingloading/viewview v-else-iflistState.errorerror/viewview v-foritem in listState.data{{item.name}}/viewview v-iflistState.loadingMore加载中/viewview v-if!listState.isThereMore没有更多了/viewbutton clickloadMore加载更多/buttonview------------------------/view/view
/templatescript
import {useRequest} from ./useRequest
import moment from moment;//模拟普通接口
function commonApi() {return new Promise((resolve, reject) {setTimeout(() {resolve({code: 0,result: moment().format(hh:mm:ss),message: success})}, 1000)})
}
//模拟列表
function listApi(data){return new Promise((resolve, reject) {setTimeout((){resolve({code:0,message:,result:{total:12,records:[{name:tangdata,id:1},{name:tang,id:2},{name:tang,id:3},{name:tang,id:1},]}})},1000)})
}//模拟调用接口
async function getCommonData() {const e await commonApi()if (e.code 0) return e.resultelse throw e.message
}
//模拟调用接口
async function getListData(data) {const e await listApi(data)if (e.code 0) return e.resultelse throw e.message
}
export default {created() {//如果参数依赖其他的data则只能在data初始化之后操作//pageNum没啥用 只是告诉下 带参数怎么使用this.listStateuseRequest(()getListData(this.pageNum),{loadMoreMod: true})},data() {return {state: useRequest(getCommonData),manualState:useRequest(getCommonData,{manual:true}),hotState:useRequest(getCommonData),listState:,pageNum:1,}},methods: {loadMore(){this.pageNumthis.listState.loadMore()},}
}
/scriptstyle/style
useRequest 代码 /*** 描述异步状态管理* 参数1 apiFunc* 必须是一个Promise。* 参数2 option* manual是否要手动出发默认false初始化时候就会调用一次接口否则则需要自己手动调用run方法* onSuccess:成功时候的回调返回获取的数据* onError:失败时候的回调返回失败信息* loadMoreMod 将以 加载更多 模式运行 将所有请求数据合并数组 .then(e)成功返回的数据必须有为{total:Number,records:[]},不是的自己await时候洗一下.* 返回值* 普通模式下* let state {data: null, //返回的数据loading: !manual, //是否正在加载error: null, //错误信息isRefresh: false, //是否正在局部刷新run(params) ,调用接口params是参数,会直接传给了apiFunc(params)当然如果你的apifunc不接受参数那就当然没用了。reFresh() 局部刷新。和run的区别就是调用的时候不会将data重新置为null而是在加载成功后替换掉。}加载更多模式下let state {data: null, //返回的数据loading: !manual, //是否正在加载error: null, //错误信息run(params) ,调用接口params是参数,会直接传给了apiFunc(params)当然如果你传递apiFunc不接受参数那就当然没用了。isThereMore:是否还有更多的数据loadingMore:是否正在加载更多中isReloading是否正在重新加载中只是为了和loading状态区分开。reLoad():重新加载loadMore():加载更多}*/
function useRequest(apiFunc, option {manual: false,onSuccess: false,onError: false,loadMoreMod:false,
}) {const {manual, onSuccess, onError,loadMoreMod} option//通用状态let state {data: null,loading: !manual,error: null,isRefresh: false,}//如果开启了加载更多模式则添加【是否有更多数据状态】if(loadMoreMod){state.isThereMoretruestate.loadingMorefalsestate.isReloadingfalse}//保存下查询的参数,列表带参数调用reload后传递的参数保存下给下次loadMore时候用。let tempParamsconst execute (params,opt{isRefresh:false,isReload:false}) {const {isRefresh,isReload}optapiFunc(params).then((e) {state.loading false//加载更多模式 合并请求的数据if(loadMoreMod){state.loadingMorefalsehandleLoadMoreModData(e,isReload)}//普通模式else {state.data eif(isRefresh){state.isRefreshfalse}}//如果是正在reload 关闭状态if(isReload)state.isReloadingfalseif (onSuccess) {onSuccess(e)}}).catch((e) {state.error e.toString()state.loading falseif(isRefresh){state.isRefreshfalse}uni.showToast({title: 错误: e.toString(),icon: none,duration: 2000})if (onError) {onError(e.toString())}})}//加载更多模式下处理s tate.data 合并数据const handleLoadMoreModData(e,isReload){const {total,records}e//第二次之合并数据 如果不是reloadif(state.data!isReload){//合并数据state.data[...state.data,...records]//判断是否还有数据const recordsLengthstate.data.length/** 为啥是大于等于呢正常情况下等于是没问题的* 但是第一次查10条一共十二条第二次查询的时候突然删的只剩下一条数据了那么返回的total是不是1 是不是就比当前合并的数组少了。* */if(recordsLengthtotal)state.isThereMorefalse}//第一次直接赋值else{//如果有值if(total!0)state.datarecordselse{state.data[]state.isThereMorefalse}}}//普通执行 会清空之前查询的数据 相当于reLoad 、const run (params) {if(loadMoreMod){state.loadingMorefalsestate.isThereMoretruestate.isReloadingfalsetempParamsparams//加载更多模式保存查询参数给reload和loadMore用}state.error null//重置错误状态state.loading true//加载状态改为加载中state.data null//重置之前查询的数据//执行execute(params)}//局部刷新const reFresh(){state.isRefresh true//加载状态改为加载中//执行if(tempParams)execute(tempParams,{isRefresh: true})elseexecute(undefined,{isRefresh: true})}//加载更多const loadMore(){//如果还要更多的数据而且当前不是正在加载更多的状态if(state.isThereMore!state.loadingMore){state.loadingMoretrue//执行//如果有保存的参数则传递保存的参数if(tempParams)execute(tempParams)elseexecute()}}//重新加载const reload(){state.loadingfalsestate.errornullstate.loadingMorefalsestate.isThereMoretruestate.isReloadingtrue//执行if(tempParams)execute(tempParams,{isReload:true})elseexecute(undefined,{isReload:true})}//如果手动触发为false则直接run查询if (!manual) run()state.runrun//加载更多模式不适用局部刷新if(!loadMoreMod){state.reFreshreFresh}//只有加载更多模式下才有的reload 和loadMoreif(loadMoreMod){state.reloadreloadstate.loadMoreloadMore}return state
}export {useRequest
}
