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

àì夳堔傛蜴生んèń 2023-01-08 08:07 222阅读 0赞

## 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_github.com_axios_axios_issues_606]  
[https://stackoverflow.com/questions/37897523/axios-get-access-to-response-header-fields][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)
    })

[https_github.com_axios_axios_issues_606]: https://github.com/axios/axios/issues/606
[https_stackoverflow.com_questions_37897523_axios-get-access-to-response-header-fields]: https://stackoverflow.com/questions/37897523/axios-get-access-to-response-header-fields