qq_43624878
恪愚
采纳率100%
2021-02-24 19:49

ajax现在不支持异步了?

5
已采纳

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • jslang 天际的海浪 2月前


    第二个问题是。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);
        })
    }
    
    点赞 2 评论 复制链接分享
  • jslang 天际的海浪 2月前

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

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

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

    点赞 3 评论 复制链接分享
  • qq_37026254 白日有梦 2月前

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

    点赞 1 评论 复制链接分享