竟態(tài)問(wèn)題

在我們?nèi)粘ｉ_發(fā)經(jīng)常遇到一些竟態(tài)問(wèn)題

例子1

現(xiàn)象1

表格分頁(yè)，如果設(shè)置請(qǐng)求loading,
先切換到分頁(yè)第99頁(yè)，迅速在又切換到第1頁(yè)，最后列表顯示的是第99頁(yè)數(shù)據(jù)。

原因

由于第99頁(yè)請(qǐng)求數(shù)據(jù)花費(fèi)時(shí)間可能500ms,第1頁(yè)數(shù)據(jù)只需要100ms,第1頁(yè)數(shù)據(jù)請(qǐng)求比較快，第99頁(yè)數(shù)據(jù)返回慢，所以第99頁(yè)數(shù)據(jù)會(huì)覆蓋第一頁(yè)數(shù)據(jù)。

現(xiàn)象2

表單具有提交按鈕，如果沒(méi)有設(shè)置提交請(qǐng)求loading時(shí)，連續(xù)點(diǎn)擊兩次，就會(huì)觸發(fā)兩次表單提交

原因

請(qǐng)求沒(méi)有做攔截，第一次請(qǐng)求沒(méi)有結(jié)束，又能觸發(fā)請(qǐng)求

axios中如何簡(jiǎn)單防止竟態(tài)問(wèn)題

【注】這里只是簡(jiǎn)單做了防止重復(fù)點(diǎn)擊

在axios 請(qǐng)求攔截器中可以設(shè)置 cancelToken

import axios from 'axios';const cusAxiosFERD = axios.create({});
const cancelToken = axios.CancelToken;
const source = cancelToken.source();
const cacheRequest = {};
// 需要處理競(jìng)態(tài)問(wèn)題的 接口
const urls = ['/xxx'];
cusAxiosFERD.interceptors.request.use( (config) => {const curUrl = config.url;if(urls.some(u=>curUrl.indexOf(u) > -1 ) && config.headers.isLimit){cacheRequest[curUrl] && cacheRequest[curUrl]();config.cancelToken = new axios.CancelToken(function executor(c) {cacheRequest[curUrl]  = c;})}return config;
}