js获取网络时间（axios获取响应头时间）-蒲公英云

js获取网络时间（axios获取响应头时间）

js 获取网络时间:

由于new Date获取的是客户本地时间，有些情况下我们需要获取网络时间，避免用户更改本地时间而产生的某些功能冲突，则我们可以通过如下方法从浏览器获取我们服务器上的时间！你也可以获取不同网址上的时间，如：www.baidu.com

const request = new XMLHttpRequest();
request.open("GET", "/", true);  // 中间参数可以改成 www.baidu.com
request.send();
//该属性每次变化时会触发
request.onreadystatechange = function(){ 
    if(request.readyState === 4 && request.status === 200){ 
        console.log(request.getResponseHeader("Date"))              //请求服务器的响应时间
        console.log(Date.parse(request.getResponseHeader("Date")))  //获取到的时间戳
    }
}

同步获取：（封装获取网络时间方法）

方法一：

axios 获取服务器时间 response.header.date

扩展：（axios 请求头缺失date的原因）
需要服务端设置字段： Access-Control-Expose-Headers
https://github.com/axios/axios/issues/606
https://stackoverflow.com/questions/37897523/axios-get-access-to-response-header-fields

没有设置请求头缺失如下:

// 
{ 
    content-type: "application/json; charset=utf-8",
    cache-control: "max-age=0, private, must-revalidate"
}

方法二：

// 封装同步获取获取网络时间方法
function getServerTime(){ 
 return new Promise((resolve) => { 
   const request = new XMLHttpRequest()
    request.open("GET", "/", true)
    request.send()
    request.onreadystatechange = function(){ 
        const serverTime = request.getResponseHeader("Date")
          if (serverTime) { 
            resolve(Date.parse(serverTime))
          } else { 
            resolve(new Date().valueOf())  //没网情况获取本地时间
        }
    }
 })
}
//使用
getServerTime().then((time) => { 
console.log(time)
})