学习AJAX必知必会(3)~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求

简介: 学习AJAX必知必会(3)~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求

1、nodemon 自动重启工具(自动重启基于nodejs开发的服务端应用)

■ nodemon 是一个工具,通过在检测到目录中的文件更改时自动重新启动node应用程序来帮助开发node.js。

//安装nodemon命令(全局安装):
npm install -g nodemon


2、解决缓存问题:当请求资源不变(地址栏的url),不再发送新的请求

  • 解决:通过添加一个随机的请求参数【新请求】---通过时间撮new Date( ).getTime( ) 或者 Data.now( )添加随机数
  • 一般不需要咱手动添加,工具都有自动生成一个时间撮
xhr.open('get', 'http://127.0.0.1:8000/server?t=Date.now()');//通过添加一个随机的请求参数【新请求】解决缓存问题


3、Ajax请求超时和网络异常处理

(1)Ajax请求超时:

  • 客户端html处理:设置超时时间timeout和超时回调函数ontimeout
//设置超时为2s
  xhr.timeout = 2000;
 //超时回调
  xhr.ontimeout = function () {
      alert('网络异常,请稍后再试!')
  }
  • 服务端进行延时提醒:
app.get('/server', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应头(允许自定义请求头)
    response.setHeader('Access-Control-Allow-Headers', '*');
  //设置响应体
    setTimeout(() => {
        response.send('服务端延时响应');  
    }, 3000)
});


(2)网络异常:

  • 客户端html处理:设置网络异常回调函数onerror
xhr.onerror = function () {
      alert('你的网络似乎除了问题!');
  }


4、Ajax取消请求

■ 通过abort方法
xhr.abort();
■ 取消重复请求(通过一个布尔的标识变量)
  • isSending初始值为false, send方法执行之后,isSending值为true,获取响应数据,判断状态值为4时,当前请求完成,isSending为false
  • 通过判断isSending 是否为true,为true 执行 abort方法
//是否正在发送ajax请求
  let isSending = false;
  if(isSending) {
        //console.log('正在请求')
        xhr.abort();
  }
  isSending = true;
 //3、发送Ajax请求
 xhr.send();
 //4、事件绑定,处理服务端返回结果
 xhr.onreadystatechange = function () {
    //处理前判断服务端是否返回所有结果和服务端的状态码是2**
    if (xhr.readyState === 4) {
         isSending = false;
    }
 }
目录
相关文章
|
机器学习/深度学习 算法 数据挖掘
没发论文的注意啦!重磅更新!GWO-BP-AdaBoost预测!灰狼优化、人工神经网络与AdaBoost集成学习算法预测研究(Matlab代码实现)
没发论文的注意啦!重磅更新!GWO-BP-AdaBoost预测!灰狼优化、人工神经网络与AdaBoost集成学习算法预测研究(Matlab代码实现)
428 0
|
XML 前端开发 JavaScript
基于python的网络课程在线学习交流系统
本研究聚焦网络课程在线学习交流系统,从社会、技术、教育三方面探讨其发展背景与意义。系统借助Java、Spring Boot、MySQL、Vue等技术实现,融合云计算、大数据与人工智能,推动教育公平与教学模式创新,具有重要理论价值与实践意义。
|
Docker 容器
Docker网关冲突导致容器启动网络异常解决方案
当执行`docker-compose up`命令时,服务器网络可能因Docker创建新网桥导致IP段冲突而中断。原因是Docker默认的docker0网卡(172.17.0.1/16)与宿主机网络地址段重叠,引发路由异常。解决方法为修改docker0地址段,通过配置`/etc/docker/daemon.json`调整为非冲突段(如192.168.200.1/24),并重启服务。同时,在`docker-compose.yml`中指定网络模式为`bridge`,最后通过检查docker0地址、网络接口列表及测试容器启动验证修复效果。
2195 39
|
缓存 人工智能 API
API接口调用中的网络异常及解决方案
淘宝API是淘宝开放平台提供的接口集合,支持商品、交易、用户、营销等数据交互。开发者需注册获取App Key,通过签名认证调用API,结合沙箱测试、OAuth授权与安全策略,实现订单管理、数据监控等应用,提升电商自动化与数据分析能力。
|
XML JSON JavaScript
从解决跨域CSOR衍生知识 Network 网络请求深度解析:从快递系统到请求王国-优雅草卓伊凡
从解决跨域CSOR衍生知识 Network 网络请求深度解析:从快递系统到请求王国-优雅草卓伊凡
326 0
从解决跨域CSOR衍生知识 Network 网络请求深度解析:从快递系统到请求王国-优雅草卓伊凡
|
数据采集 Web App开发 前端开发
处理动态Token:Python爬虫应对AJAX授权请求的策略
处理动态Token:Python爬虫应对AJAX授权请求的策略
|
人工智能 网络协议 IDE
使用通义灵码AI高效学习muduo网络库开发指南
Muduo 是一个基于 C++11 的高性能网络库,支持多线程和事件驱动,适用于构建高效的服务器和应用程序。它提供 TCP/IP 协议支持、异步非阻塞 I/O、定时器、异步日志等功能,并具备跨平台特性。通过 Git 克隆 muduo 仓库并切换至 C++17 分支可开始使用。借助 AI 工具如 Deepseak-v3,用户可以更便捷地学习和理解 Muduo 的核心模块及编写测试用例,提升开发效率。
|
前端开发 小程序 Java
uniapp-网络数据请求全教程
这篇文档介绍了如何在uni-app项目中使用第三方包发起网络请求
1242 3