Axios 중복 요청 취소 방법 실례 상세 설명
웹 프로젝트 개발 과정 에서 우 리 는 반복 적 으로 요청 하 는 장면 을 자주 만 날 수 있 습 니 다.만약 에 시스템 이 중복 되 는 요청 을 처리 하지 않 으 면 시스템 에 여러 가지 문제 가 발생 할 수 있 습 니 다.예 를 들 어 중복 되 는 post 요청 은 서버 에 두 개의 기록 을 만 들 수 있 습 니 다.그렇다면 중복 요청 은 어떻게 생 겼 을 까?여기 서 우 리 는 두 가지 흔히 볼 수 있 는 장면 을 들 었 다.
4.567917.페이지 에 단추 가 있다 고 가정 하면 사용자 가 단 추 를 누 르 면 AJAX 요청 을 합 니 다.이 단 추 를 제어 하지 않 으 면 사용자 가 단 추 를 빠르게 누 르 면 중복 요청 을 합 니 다4.567917.시험 결과 조회 페이지 에서 사용 자 는'이미 통과','미 통과'와'전부'세 가지 조회 조건 에 따라 시험 결 과 를 조회 할 수 있다 고 가정 한다.요청 한 응답 이 느 리 면 사용자 가 서로 다른 조회 조건 전에 빠르게 전환 할 때 중복 요청 이 발생 합 니 다.
중복 요청 이 어떻게 생 겼 는 지 알 았 으 니 문제 가 생 길 수도 있다 는 것 도 알 았 다.이 어 아 보 형 은 악 시 오 스 를 예 로 들 어 중복 요청 문 제 를 해결 해 드 리 겠 습 니 다.
1.요청 을 취소 하 는 방법
Axios 는 Promise 기반 HTTP 클 라 이언 트 로 브 라 우 저 와 Node.js 환경 을 지원 합 니 다.이것 은 우수한 HTTP 클 라 이언 트 로 대량의 웹 프로젝트 에 광범 위 하 게 응용 된다.브 라 우 저 환경 에서 Axios 바 텀 은 XML HttpRequest 대상 을 이용 하여 HTTP 요청 을 합 니 다.요청 을 취소 하려 면 XML HttpRequest 대상 의 abort 방법 으로 요청 을 취소 할 수 있 습 니 다.
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://developer.mozilla.org/", true);
xhr.send();
setTimeout(() => xhr.abort(), 300);
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post('/user/12345', {
name: 'semlinker'
}, {
cancelToken: source.token
})
source.cancel('Operation canceled by the user.'); // ，
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
});
cancel(); //
2.중복 요 구 를 어떻게 판단 합 니까?
요청 방식,요청 URL 주소,요청 매개 변수 가 같 을 때 요청 이 같다 고 볼 수 있 습 니 다.따라서 요청 을 할 때마다 우 리 는 현재 요청 한 요청 방식,요청 URL 주소 와 요청 매개 변수 에 따라 유일한 key 를 생 성 할 수 있 으 며,동시에 모든 요청 에 전용 Cancel Token 을 만 든 다음,key 와 cancel 함 수 를 키 값 으로 맵 대상 에 저장 할 수 있 습 니 다.맵 을 사용 하면 중복 요청 여 부 를 신속하게 판단 할 수 있다 는 장점 이 있 습 니 다.
import qs from 'qs'
const pendingRequest = new Map();
// GET -> params；POST -> data
const requestKey = [method, url, qs.stringify(params), qs.stringify(data)].join('&');
const cancelToken = new CancelToken(function executor(cancel) {
if(!pendingRequest.has(requestKey)){
pendingRequest.set(requestKey, cancel);
}
})
3.중복 요청 을 어떻게 취소 합 니까?
모든 요청 을 처리 해 야 하기 때문에 Axios 의 차단기 메커니즘 을 사용 하여 중복 요청 을 취소 하 는 기능 을 고려 할 수 있 습 니 다.Axios 는 개발 자 에 게 요청 차단기 와 응답 차단 기 를 제공 합 니 다.이들 의 역할 은 다음 과 같 습 니 다.
4.567917.요청 차단기:이러한 차단기 의 역할 은 요청 을 보 내기 전에 일부 작업 을 통일 적 으로 수행 하 는 것 입 니 다.예 를 들 어 요청 헤더 에 token 필드 를 추가 하 는 것 입 니 다4.567917.응답 차단기:이러한 차단기 의 역할 은 서버 응답 을 받 은 후에 일부 작업 을 통일 적 으로 수행 하 는 것 입 니 다.예 를 들 어 응답 상태 코드 가 401 인 것 을 발견 하면 자동 으로 로그 인 페이지 로 이동 합 니 다.
3.1 정의 보조 함수
요청 차단기 와 응답 차단 기 를 설정 하기 전에 아 보 형 은 먼저 3 개의 보조 함 수 를 정의 합 니 다.
generateReqKey： ， Key；
function generateReqKey(config) {
const { method, url, params, data } = config;
return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}
const pendingRequest = new Map();
function addPendingRequest(config) {
const requestKey = generateReqKey(config);
config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
if (!pendingRequest.has(requestKey)) {
pendingRequest.set(requestKey, cancel);
}
});
}
function removePendingRequest(config) {
const requestKey = generateReqKey(config);
if (pendingRequest.has(requestKey)) {
const cancelToken = pendingRequest.get(requestKey);
cancelToken(requestKey);
pendingRequest.delete(requestKey);
}
}
3.2 요청 차단기 설정
axios.interceptors.request.use(
function (config) {
removePendingRequest(config); // ，
addPendingRequest(config); // pendingRequest
return config;
},
(error) => {
return Promise.reject(error);
}
);
axios.interceptors.response.use(
(response) => {
removePendingRequest(response.config); // pendingRequest
return response;
},
(error) => {
removePendingRequest(error.config || {}); // pendingRequest
if (axios.isCancel(error)) {
console.log(" ：" + error.message);
} else {
//
}
return Promise.reject(error);
}
);
전체 예제 코드:https://gist.github.com/semlinker/e426780664f0186db434882f1e27ac3a
여기 서 Axios 가 반복 요청 예제 의 실행 을 취소 한 결 과 를 살 펴 보 겠 습 니 다.
위의 그림 에서 알 수 있 듯 이 중복 요청 이 발생 하면 이전에 보 냈 고 완료 되 지 않 은 요청 이 취 소 됩 니 다.다음은 중복 요청 을 취소 하 는 처리 절 차 를 프로 세 스 맵 으로 정리 합 니 다.
마지막 으로 앞 에 남 긴 질문,즉 Cancel Token 내 부 는 어떻게 일 하 는 지 대답 해 볼 까요?
4.Cancel Token 의 작업 원리
앞의 예제 에서 저 희 는 CancelToken 구조 함 수 를 호출 하여 CancelToken 대상 을 만 듭 니 다.
new axios.CancelToken((cancel) => {
if (!pendingRequest.has(requestKey)) {
pendingRequest.set(requestKey, cancel);
}
})
// lib/cancel/CancelToken.js
function CancelToken(executor) {
if (typeof executor !== 'function') {
throw new TypeError('executor must be a function.');
}
var resolvePromise;
this.promise = new Promise(function promiseExecutor(resolve) {
resolvePromise = resolve;
});
var token = this;
executor(function cancel(message) { // cancel
if (token.reason) {
return; // Cancellation has already been requested
}
token.reason = new Cancel(message);
resolvePromise(token.reason);
});
}
// lib/adapters/xhr.js
if (config.cancelToken) {
config.cancelToken.promise.then(function onCanceled(cancel) {
if (!request) { return; }
request.abort(); //
reject(cancel);
request = null;
});
}
총화
본 고 는 Axios 에서 중복 요청 을 취소 하 는 방법 과 CancelToken 의 작업 원 리 를 소개 합 니 다.후속 글 에서 아 보 형 은 Axios 에서 데이터 캐 시 를 어떻게 설정 하 는 지,관심 있 는 파트너 를 놓 치지 마 세 요.Axios 에서 HTTP 차단기 와 HTTP 어댑터 의 디자인 과 구현 을 알 고 싶다 면,이 글 을 읽 을 수 있 습 니 다77.9K 의 Axios 프로젝트 는 어떤 참고 할 만 한 점 이 있 습 니까?
Axios 중복 요청 취소 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Axios 중복 요청 취소 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
6.참고 자원
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Nuxt.js】axios로 header에 Authorization를 항상 붙이고 싶다!투고자의 고민 ・JWT 인증의 앱으로 axios로 API 두드릴 때 headers에 Authorization:token을 붙이는 공통 처리를 만들고 싶다 (여러가지 기사 봐도 어쩔 수 없어···) 고민 해결 nuxt...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
