ajax现在不支持异步了?

发送ajax时open那里第三个参数如果是false,则会给一个警告,没有报错网络里也正常发出请求了但是不会执行onreadystatechange里的代码;如下代码将ajax用promise包裹控制台里同样发现正常请求了但是console中会直接报错打印请求失败

let readUrlPromise=url=>{
    return new Promise((resolve,reject)=>{
        let xhr=new XMLHttpRequest();
        xhr.open("GET",url);
        xhr.send(null);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
                // console.log(JSON.parse(xhr.responseText));
                resolve(JSON.parse(xhr.responseText));
            }else{
                reject('请求失败');
            }
        }
    })
}
readUrlPromise("https://devapi.qweather.com/v7/weather/24h?location=经纬度&key=和风天气key").then(data=>{
    console.log(data);
})
 


第二个问题是。onreadystatechange 事件是每次请求状态(xhr.readyState)改变时都会触发,一个请求要触发好几次onreadystatechange事件,
当第一次onreadystatechange事件触发时xhr.readyState肯定不为4,你的代码就会执行else中的reject('请求失败');直接反馈请求失败,
只有最后一次onreadystatechange事件时xhr.readyState才为4,表示请求完毕。
 

正确的代码应该是

let readUrlPromise=url=>{
    return new Promise((resolve,reject)=>{
        let xhr=new XMLHttpRequest();
        xhr.open("GET",url);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
                // console.log(JSON.parse(xhr.responseText));
                resolve(JSON.parse(xhr.responseText));
            }else if(xhr.readyState==4 && xhr.status!=200){
                reject('请求失败');
            }
        }
        xhr.onerror=function(){
            reject('请求失败');
        }
        
        xhr.send(null);
    })
}

 

open()第三个参数如果是false,是同步模式,代码在执行到 xhr.send(null); 时就会暂时停止执行等待ajax加载完成,之后才执行后面的代码。

你定义 xhr.onreadystatechange 事件的代码写在 xhr.send(null); 后面,在xhr.send(null); 暂停至ajax加载完成时xhr.onreadystatechange 事件还没有定义自然不会触发。

所以要把定义 xhr.onreadystatechange 事件的代码写在 xhr.send(null); 之前才行。
 

你们太恐怖了,凌晨2点不睡觉的