目录
nodemon自动重启工具
nodemon是一种工具，可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。
安装命令：npm install -g nodemon
一、AJAX请求超时与缓存问题
先设计出一个需求：
点击按钮，向服务端发送请求，服务端返回结果，加一个超时设置，时间为2s，若2s后没有返回结果，则给用户一个提醒"网络超时，请稍后重试"
完成该需求需要准备前端与服务端内容，准备一个html文件和一个js文件
1.server.js文件
//1.引入express
const { response } = require('express');
const express = require('express');
//2.创建应用对象
const app = express()
//3.创建路由规则
app.get('/delay', (request, response) => {
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
setTimeout(() => {
//设置响应体
response.send('延时响应')
}, 3000)
});
//4.监听端口启动服务
app.listen(5000, () => {
console.log('服务已经启动，5000端口监听中....');
})2.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>请求超时与网络异常</title>
<style>
#result{
width: 200px;
height: 100px;
border:solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result')
btn.addEventListener('click',function(){
const xhr = new XMLHttpRequest();
//超时设置 2s
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
alert("网络异常，请稍后重试！")
}
//网络异常回调
xhr.onerror = function(){
alert('你的网络似乎出了一些问题')
}
xhr.open('GET','http://127.0.0.1:5000/delay');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
</html>二、AJAX取消请求
设计一个需求，有两个按钮，点击第一个向服务器发送请求，点击第二个取消请求，如下图：
调用 abort 方法 手动取消ajax请求
server.js文件不改变，html文件如下：
<body>
<button>点击发送</button>
<button>点击取消</button>
<script>
//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
btns[0].onclick = function(){
x = new XMLHttpRequest();
x.open("GET","http://127.0.0.1:5000/delay");
x.send();
}
//调用abort方法手动取消ajax请求
btns[1].onclick = function(){
x.abort()
}
</script>
</body>三、AJAX请求重复发送问题
设计一个需求，点击按钮向服务器发送请求，再次点击时，如果正在发送上一个请求，则取消该请求，创建一个新请求，如下图：
server.js文件不改变，html文件如下：
<body>
<button>点击发送</button>
<script>
//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
//标识变量
let isSending = false;//是否正在发送AJAX请求
btns[0].onclick = function(){
//判断标识变量
if(isSending) x.abort();//如果正在发送，则取消该请求，创建一个新的请求
x = new XMLHttpRequest();
//修改标识变量的值
isSending = true;
x.open("GET","http://127.0.0.1:5000/delay");
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
//修改标识变量
isSending = false;
}
}
}
</script>
</body>