Ajax 요청 시간 초과 및 네트워크 이상 처리 그림 설명
4969 단어 ajax청구 하 다.시간 을 초과 하 다
문제.
브 라 우 저가 시간 초과 나 네트워크 이상 을 요청 할 때,우리 프로그램 은 어떤 처리 와 반응 을 해 야 합 니까?
ps:코드 는 제 가 뒤에 붙 일 게 요.생각 이 제일 중요 해 요.
\#요청 시간 초과 우선=express==논리 적 으로 이렇게 쓰 여 있 습 니 다.
//
app.all("/delay", (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
setTimeout(() => {
response.send(' ： ');
}, 3000);
})
처음에는 요청 시간 을 추가 하지 않 았 습 니 다.결 과 를 출력 할 수 있 습 니 다.
그렇다면 지금 은 요청 에 제한 시간 을 추가 해 야 합 니 다.이 제한 시간 을 초과 하면 브 라 우 저 는 이 요청 이 시간 을 초과 했다 고 생각 합 니 다.아래 와 같이 덧붙이다
코드 를 저장 한 후 브 라 우 저 로 새로 고침 하여 콘 솔 을 엽 니 다.
network 를 선택 하고 단 추 를 누 르 면 network 의 요청 상 태 를 관찰 합 니 다.
우선 처음에는 pending 상태(요청 중)
요청 한 한도 값(2s)을 초과 하 였 습 니 다.이 때 표시 요청 이 취소 되 었 습 니 다.finish 가 아 닌 cancel 상 태 를 표시 합 니 다.
그러나 실제 업무 에 서 는 모든 사용자 가 콘 솔 을 열 어 요청 이 시간 을 초과 하 였 는 지 볼 수 없 기 때문에 우 리 는 요청 시간 초과 반전 을 추가 하여 정보 팝 업 창 알림 을 완성 할 수 있 습 니 다.
우 리 는 새로 운행 을 하 였 는데,이때 바로 팝 업 창 알림 이 있 는 것 을 발견 하 였 다.
그럼 시간 초과 요청 은 여기까지 입 니 다.
네트워크 이상
이제 네트워크 이상 을 어떻게 처리 해 야 하 는 지 살 펴 보 겠 습 니 다.그러면 네트워크 이상 은 전단 js 에 도 반전 함수 가 있 습 니 다.다음 과 같 습 니 다.
그리고 저 희 는 브 라 우 저의 콘 솔 을 통 해 오프라인 상 태 를 모 의 합 니 다.
그리고 우 리 는 버튼 을 눌 러 효 과 를 보 았 다.
문 제 를 얻 지 마라!
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<titile> </titile>
<style>
#content {
width: 400px;
height: 200px;
border: 1px solid rgb(4, 247, 25);
border-width: 3px;
margin: 20px 0 20px 0;
}
</style>
</head>
<body>
<button type="button"> </button>
<div id="content"></div>
<script>
const btn = document.getElementsByTagName('button')[0];
const res = document.getElementById('content');
btn.onclick = function() {
const xhr = new XMLHttpRequest();
xhr.timeout = 2000;
xhr.ontimeout = function() {
alert(' ， ！');
}
xhr.onerror = function() {
alert(' ， ');
}
xhr.open('GET', 'http://127.0.0.1:8080/delay');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
res.innerHTML = xhr.response;
}
} else {
}
}
};
</script>
</body>
</html>
const express = require("express");
const app = express();
//
app.all("/delay", (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
setTimeout(() => {
response.send(' ： ');
}, 3000);
})
app.listen(8080, () => {
console.log(' 8080 ');
});
Ajax 요청 시간 초과 와 네트워크 이상 처리 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Ajax 요청 시간 초과 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
