AJAX请求问题与axios实践：优化、超时与跨域管理-优快云博客

一、Ajax请求的几个问题

1.1 IE缓存问题

IE浏览器会对Ajax的请求结果做一个缓存，当响应体改变时，它不会更新，而是走缓存。
解决办法：让每次请求的url都不一样，在后面加一个参数，值为时间戳，就可以解决改变响应体时IE走缓存不更新的问题。

//针对IE缓存
app.get('/ie',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    //设置响应体
    response.send('hello IE');
});

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click',function(){
            // console.log('test');
            const xhr = new XMLHttpRequest();
            xhr.open("GET",'http://127.0.0.1:8000/ieie?t='+ Date.now());
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status< 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

1.2 AJAX请求超时与网络异常处理

在服务端设置一个定时器

//延时响应
app.all('/delay',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(() => {
         //设置响应体
        response.send('延时响应');
    },3000)

点击按钮发送请求时，可以设置超时xhr.timeout和超时回调xhr.ontimeout，还有网络异常回调xhr.onerror

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest();
            //超时设置2s
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function(){
                alert("网络异常，请稍后重试！");
            }
            //网络异常回调
            xhr.onerror = function(){
                alert("网络异常，请稍后重试");
            }
            xhr.open("GET",'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status< 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

1.3 AJAX手动取消请求

在服务端设置一个定时器

//延时响应
app.all('/delay',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(() => {
         //设置响应体
        response.send('延时响应');
    },3000)

取消请求，用xhr.abort()方法

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll("button");
        let x = null;

        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
        }

        //abort 取消请求
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>

1.4 AJAX请求重复发送问题

在服务端设置一个定时器

//延时响应
app.all('/delay',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(() => {
         //设置响应体
        response.send('延时响应');
    },3000)

<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll("button");
        let x = null;
        //标识变量
        let isSending = false; // 是否正在发送AJAX请求

        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            //判断标识变量
            if(isSending) x.abort();//如果正在发送，则取消该请求，创建一个新的请求
            //修改标识变量的值
            isSending = true;
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //修改标识变量
                    isSending = false;
                }
            }
        }
    </script>
</body>

二、axios发送AJAX请求

服务端：

//axios 服务
app.all('/axios-server',(request,response)=>{
    //设置响应头  
    response.setHeader('Access-Control-Allow-Origin','*'); //设置允许跨域
    response.setHeader('Access-Control-Allow-Headers','*'); //接收自定义请求头
   
    const data = {name:'xiaoxiao'}
    response.send(JSON.stringify(data));
});

2.1 GET请求、POST请求和axios函数发送通用请求

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        const btns = document.querySelectorAll('button');

        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function(){
            //GET请求
            axios.get('/axios-server',{
                //url参数
                params:{
                    id:100,
                    vip:7
                },
                //请求头信息
                Headers:{
                    name:'atguigu',
                    age:20
                }
            }).then(value => {
                console.log(value);
            })
        }

        btns[1].onclick = function(){
            //post请求
            axios.post('/axios-server',{
                    username:'admin',
                    password:'admin'
                },{
                //url参数
                params:{
                    id:200,
                    vip:0
                },
                //请求头信息
                Headers:{
                    height:120,
                    weight:130,
                }
         
            })
            
        }
        
        btns[2].onclick = function(){
            axios({
                //请求方法
                method:'POST',
                //url
                url:'/axios-server',
                //url参数
                params:{
                    vip:10,
                    level:30
                },
                //头信息
                Headers:{
                    a:100,
                    b:200
                },
                //请求体参数
                data:{
                    username:'admin',
                    password:'admin'
                }
            }).then(response => {
                console.log(response);
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.Headers);
                //响应体
                console.log(response.data);
            })
        }
   </script>
</body>