ajax 封装

调用

ajax({
    method:"post",
    url:"http://localhost:3000/first",
    params:{
        name:"xx",
        age:18
    }
}).then(res=>{
    console.log(res)
})

封装

/**
 * ajax封装
 * @paraams options 参数对象
 *    method 请求参数 默认get
 *    url 请求路径
 *    asyncs 是否异步
 *    params 参数
 *    dataType 参数格式 urlencoded json
 *      
*/
function ajax(options){

    // 默认配置
    let defaultObj = { 
        method:"GET",
        asyncs:true,
        params:{},
        dataType:'json'
    }

    // 配置对象 
    Object.assign(defaultObj,options)

    return new Promise((resolve, reject)=>{
        // 处理method小写 method.toLocaleUpperCase()
        let {dataType,method,url,asyncs,params,methods=method.toLocaleUpperCase()} = defaultObj

        // 处理query参数
        let queryString = ''
        if(methods == 'GET' || dataType == 'urlencoded'){
            Object.keys(params).forEach(key=>{
                queryString += `${key}=${params[key]}&`
            })
            if(queryString){
                queryString = queryString.substring(0,queryString.length - 1)   // 去除最后的&              
                url += '?' + queryString // 拼接url
            }
        }

        // 1.创建xhr 对象
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
        
        // 2.请求初始化
        xhr.open(methods,url,asyncs)
      
        // 3 请求监听  可以写在发送请求后面（在异步请求的情况下）
        xhr.onreadystatechange = function(){
       
            // 如果请求没有完成，直接结束
            if(xhr.readyState !== 4) return 

            // 如果响应状态在[200,300)之间代表成功，否则失败
            const {status,response,statusText} = xhr
            if(status >= 200 && status <= 299){
            
                // 获取响应数据类型  要在请求已接收xhr.readyState=2 才能获取 
                // application/json;charset=utf-8 application/html;charset=utf-8 ....
                let cType  = xhr.getResponseHeader('Content-type') 

                // 响应数据
                let data = response
                if(cType.includes('application/json')){ // json格式处理
                    data = JSON.parse(data)
                }

                // data数据 status状态码 statusText状态文本信息
                resolve({data, status,statusText})
            }else{
                reject(new Error("xhr error status is "+status))
            }
        }

        // 或者
        // xhr.onload = function(){
        //     // 如果响应状态在[200,300)之间代表成功，否则失败
        //     const {status,response,statusText} = xhr
        //     if(status >= 200 && status <= 299){
        //         逻辑处理
        //     }else{
        //         reject(new Error("xhr error status is "+status))
        //     }
        // }

        xhr.onerror = function(){
            reject(new Error("网络中断，无法发送Ajax请求"))
        }

        // 4 发送请求
        if(methods === 'GET' || methods === 'DELETE'){
            xhr.send()
        }else if(methods === 'POST' || methods === 'PUT'){
            let contentType = 'json'
            let data = JSON.stringify(params)
            // 设置数据请求的数据格式
            if(dataType === 'urlencoded'){
                contentType = 'x-www-from-urlencoded'
                data = queryString
            }
            xhr.setRequestHeader('Content-Type',`application/${contentType};charset=utf-8`) //告诉服务器请求体的格式是
            xhr.send(data)// 发送json格式请求体参数
        }
    })
}