当接口下拉框实时搜索,第一个字输入后,加载的数据量很大,第二个字输入后,数据量很小或者没有数据时,优化处理
1. 引入axios
2. data中声明一个变量例如: isGetData: null
3. remote-method="getattenMember"
4. getattenMember(search) {
this.attenoptions = []
this.attendeesList = []
const CancelToken = axios.CancelToken; // *;
/*每次请求前,判断之前有没有请求,如果有请求,取消上次的请求,cancel() */
if( this.isGetData){
this.isGetData.cancel('Operation canceled by the user.');
}
if (search) {
this.remoteattenLoading = true
this.isGetData= CancelToken.source()
get请求api({ search: search }, {
cancelToken: this.isGetData.token // 传递给拦截器的config
})
.then((res) => {
if (res.code === 0 && res.list && res.list.length>0) {
//数据存储
} else if (res.code != 401 && res.code != 0) {
}
})
.finally(() => {
this.remoteattenLoading = false
})
} else {
this.attenoptions = []
}
},
5.export function getqxryListYdwApi(params, cancelToken) {
return request({
url: '****你的接口地址',
method: 'get',
params,
...cancelToken
})
6. axios封装处
service.interceptors.request.use(
config => {
config.headers['token'] = getToken()||''
return config
},
error => {
console.log(error) // for debug
return Promise.reject(error)
}
)