发送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点不睡觉的