zoukankan      html  css  js  c++  java
  • 学习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;
        }
     }
    
  • 相关阅读:
    爬虫之暴力字典生成器
    爬虫之自动生成url
    数字、大小写字母的字符编码
    对avalonjs的研究
    求墙之间有多少水洼
    2.在centos7虚拟机搭建nginx网站
    P1250 种树
    暂时用笔记
    羊村的OI题解
    P1083 借教室
  • 原文地址:https://www.cnblogs.com/shan333/p/15832555.html
Copyright © 2011-2022 走看看