欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js获取网络时间(axios获取响应头时间)

程序员文章站 2022-03-10 21:57:26
js 获取网络时间:由于new Date获取的是客户本地时间,有些情况下我们需要获取网络时间,避免用户更改本地时间而产生的某些功能冲突,则我们可以通过如下方法从浏览器获取我们服务器上的时间! 你也可以获取不同网址上的时间,如:www.baidu.comrequest = new XMLHttpRequest();request.open("GET", "/", true); // 中间参数可以改成 www.baidu.comrequest.send();//该属性每次变化时会触发reques...

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://*.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)
})

本文地址:https://blog.csdn.net/qq_41614928/article/details/112830267