Ajaxネットワークタイムアウトとネットワーク例外
サーバーが情報を迅速に返すことができるようにする方法はありません(ビューアーが多すぎる、サーバーの過負荷など)。
フロントエンドのユーザーにわかりやすいリマインダーを提供します。
製品体験をより良くします。
ケーススタディ
サーバーが2秒以内に結果をブラウザに送信しない場合、ブラウザのフロントエンドはネットワークがタイムアウトしたことを通知します。
コンテンツを設定する
フロントエンド設定では、2秒以内に応答がない場合、ネットワークにタイムアウトを要求します。
1.testseven文件夹
このフォルダ内に
作成します2.作成しますerror.html文件
3.作成しますserver.js文件
error.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击获取信息</button>
<div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div>
<script>
// 一:获取元素对象
const texttwo = document.getElementsByTagName('button')[0];
//
const result = document.querySelector('#result');
//
texttwo.addEventListener('click', function(){
console.log('点击发送测试成功.')
// 1.发送请求
const textone = new XMLHttpRequest();
// 超时设置 超过两秒 请求将会自动取消
textone.timeout = 2000;
// 超时回调,确认超时后,弹出一个窗口
textone.ontimeout = function(){
alert('两秒内没有接收到返回,故弹出窗口');}
// 网络异常
// 这个不需要后端去处理,只是用户的网络出现了问题
// 只做一个弹出框来友好地告诉用户
textone.onerror = function(){
alert('网络异常的弹出框.');}
// 自动转化
// 借助textone对象里面的属性来转化
// 设置响应体数据的类型
textone.responseType = 'json';
// 2.初始化
textone.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());
// 3.发送
textone.send();
// 4.事件绑定
textone.onreadystatechange = function(){
if(textone.readyState === 4){
if(textone.status >= 200 && textone.status < 300){
// 测试打印
console.log(textone.response);
// 使用自动转化
result.innerHTML = textone.response.name;
}
}
}
});
</script>
</body>
</html>
バックエンド設定を受け取った後、応答する前に3秒待ちます。
遅延送信にはタイマーを使用してください。
server.js文件
// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则 里面的形参 request与response (自己可以随便定义名字的)
// 建议写成 request与response 因为可以见名思意,方便自己看
// request 对请求报文的封装
// responst 对响应报文的封装
// 请求路径为'/ie'
// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all 表示可以接收任意类型的请求 如get post 等等
app.get('/ie', (request, response)=>{
// 设置响应头 设置允许跨域
// 头名字为Access-Control-Allow-Origin
// 头的值为
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头 *号表示所有的头信息都可以接收
response.setHeader('Access-Control-Allow-Headers','*');
// 响应一个数据 把这个对象返回给浏览器
const data = {
name: 'setTimeout'
};
// 对对象进行字符串转换
let str = JSON.stringify(data);
// 设置定时器延时
// setTimeout(()=>{},3000);
// 设置响应体
// response.send(str);
// 把响应体放进延时器函数里面
setTimeout(()=>{
response.send(str);},3000);
});
// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调,用来提示,告诉自己是否监听成功
app.listen(8000, ()=>{
console.log("服务已经启动,8000端口监听中......");
});
このページを切断し、
オンラインからオフラインに変更するようにブラウザを設定します