创建Ajax并用Promise封装

创建Ajax并用Promise封装

1. 创建Ajax

let xhr = new XMLHttpRequest();
    xhr.open('get','xxxx',true); //open(请求方法,URL,是否异步)
    xhr.onreadystatechange  = () =>{   //监听readyState值的变化
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status <300 || xhr.status === 304){  
                //xhr.status:服务器返回的状态码
                resolve(JSON.parse(xhr.responseText))
            }else{
                reject(new Error(xhr.statusText))
            }
        }
    xhr.send(); //send(请求体)
}
/* 
 * readyState 标识浏览器请求响应式处于哪个过程 
 * 0:未调用open方法
 * 1:调用open(),未调用send()
 * 2:已经接收全部响应数据
 * 3:正在解析数据
 * 4:解析完成,可以通过XMLHttpRequest对象的属性取得数据
 */

2. Promise封装Ajax

function ajaxPromise(){
    let promise= new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open('get','xxx');
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status <300|| xhr.status === 304){
                    resolve(JSON.parse(xhr.responseText))
                }else{
                    reject(new Error(xhr.statusText))
                }
            }
        }
        xhr.send();
    })
    return promise
}

let btn = document.querySelector("button")
btn.onclick = ()=>{
    ajaxPromise().then((res)=>{
        console.log(res)
    })
    .catch((err)=>{
        console.log(err)
    })
}