ajax之自定义请求头，取消请求，fetch（）请求

1.自定义请求头问题解决

一般会将身份校验的信息放在请求的头部，传递给服务器，服务器对参数进行提取，对身份进行校验。

当使用自定义的写法xhr.setRequestHeader（'name’,'zhangsan'）但是当将“zhangsan”替代为汉字“张三”无法正常运行
可能会出现如下问题：

解决方法：

• 将原来js文件的post请求改为all
• all：可以接收任意类型的请求
• 设置一个 res.setHeader('Access-Control-Allow-Headers', '*')

app.all('/sever', (req, res) => {
    // 设置一个响应头，设置允许跨域
    res.setHeader('Access-Control-Allow-Origin', '*')
    //响应头，解决自定义请求头的报错的问题
    res.setHeader('Access-Control-Allow-Headers', '*')
    res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
    // 设置响应
    res.send('hello ajax')
})

2.取消重复请求

核心点：abort（）函数，立即终止当前进程，产生异常程序终止，进程终止时不会销毁任何对象。

源代码：

• 首先自定义一个标识变量eg：issending=false
• 在点击之后即关闭上一个请求，重新开启此时的请求
• 最后判断状态为4时即修改标识变量，不判断status是因为status可能是一个失败的请求状态

 - 前端页面
        let x = null
        // 标识变量
        let issending=false
        btn[0].onclick=function(){
            if(issending) x.abort()
            x = new XMLHttpRequest()
            //修改标识变量的值
            issending=true
            x.open('GET','http://127.0.0.1/repeat')
            x.send()
            x.onreadystatechange=function(){
                if(x.readystate===4){
                    issending=false
                }
            }
        }
        btn[1].onclick=function(){
            x.abort()
        }
 - sevser.js的内容
        app.get('/repeat', (req, res) => {
        // 设置一个响应头，设置允许跨域
        res.setHeader('Access-Control-Allow-Origin', '*')
        //响应头，解决自定义请求头的报错的问题
        setTimeout(() => {
           res.send('延迟响应')
         },3000)
       })

3. Ajax之fetch（）请求

基本格式：

  javascript  fetch('http://example.com/movies.json')    
 .then(response => response.json())    
  .then(data =>console.log(data));

注意事项：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （如果响应的 HTTP 状态码不在
  200 - 299 的范围内，则设置 resolve 返回值的 ok 属性为 false
  ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• fetch 不会发送跨域 cookies

事例显示：

  btn[2].onclick=function(){
            fetch('http:127.0.0.1/fetch-sever',{
                method:'POST',
                headers:{
                    name:'lisi'
                },
                // 请求体:
                body:'username=admin'
            }).then(response=>{
              //使用text方法返回一个data对象
                return response.text()
            }).then(response=>{
                console.log(response);
            })
        }
        

fetch-sever.js内容：
app.all('/fetch-sever', (req, res) => {
    // 设置一个响应头，设置允许跨域
    res.setHeader('Access-Control-Allow-Origin', '*')
    //响应头，解决自定义请求头的报错的问题
    res.setHeader('Access-Control-Allow-Headers', '*')
    // res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
    // 设置响应
    // 设置响应的数据
    const data = {
        name: '大理'
    }
    // 对对象字符串进行转换
    let str = JSON.stringify(data);
    res.send(str)
})

下面是使用response.text()返回的对象