Promise实践练习—AJAX请求

点击按钮，请求远程图片接口并显示到页面上。
html部分放一个空的div和一个按钮button即可，主要是js代码如下：

const btn =document.querySelector('button') //获取按钮
btn.addEventListener('click',function(){

    //创建Promise
    const p =new Promise((resolve,reject)=>{
        //1.创建ajax请求对象
        const xhr =new XMLHttpRequest()
        //2.初始化
        xhr.open('get','https://api.vvhan.com/api/view?type=json')
        //3.发送
        xhr.send()
        //4.处理响应结果
        xhr.onreadystatechange=function(){
            if(xhr.readyState === 4){
                if(xhr.status>=200 && xhr.status<300){
                    //成功 处理远程图片
                    resolve(JSON.parse(xhr.response).imgurl)
                }else{
                    //失败控制台输出响应状态码
                    reject(xhr.status)
                }
            }
        }
    })
    //调用then方法
    p.then(value=>{
        let img=document.createElement('img') //创建一个img元素
        let ul=document.querySelector('.ul') //获取到ul
        img.setAttribute('src',value) //设置img元素src属性
        ul.appendChild(img) //元素追加到ul
    },reason=>{
        console.warn(reason);
    })
})