ajax现在不支持异步了？

Question

发送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);
})
 

Answer 1

第二个问题是。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);
    })
}