用promise封装一个ajax

2,283 阅读1分钟

众所周知,在前端请求中,一般常用ajax进行交互,目前市场上也有一些用promise封装好的解决方案,比如axios,用起来很方便,但是作为技术人员,只会用别人的轮子,那也不是咱性格,下面手动封装一个原生的ajax

直接上代码

function pajax({url=null, method='GET', dataType='JSON', async='true'}){ //这里有四个参数,对应常用的ajax配置,这里用ES6设置默认参数的方式进行设值
    return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest
        xhr.open(method, url, async)
        xhr.responseType = dataType
        xhr.onreadystatechange = () =>{
            //状态码做一个简单的正则验证
            if(xhr.readyState == 4 && xhr.status == 200) {
				let result = xhr.responseText
				resolve(result)
			}
        }
        xhr.onerror = (err) => {
            reject(err)
        }
        xhr.send()
    })
}

pajax({
    url:'./test.json', 
    method: 'get'
}).then((result)=>{
    console.log(result)
},(err)=>{
console.log(err)
})