axios函数/方法封装

function axios({method,url,params,data}){
    // 讲方法名转化为大写
    method = method.toUpperCase()
    // 返回值
    return new Promise((resolve,reject) =>{
        // 四步骤
        // 1.创建对象
        const xhr = new XMLHttpRequest()
        // 2.初始化
        // 处理params对象 a=100&b=200
        let str = ''
        for(let k in params){
            str += `${k}=${params[k]}&`
        }
        str = str.slice(0,-1)
        xhr.open(method,url+'?'+str)
        // 3.发送
        if(['POST','PUT','DELETE'].includes(method)){
            // Content-type mime类型设置
            xhr.setRequestHeader('Content-type','application/json')
            // 设置请求体
            xhr.send(JSON.stringify(data))
        }else{
            xhr.send()
        }
        // 设置响应结果的类型为JSON
        xhr.responseType = 'json'
        // 4.处理结果
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                // 判断响应状态码 2xx
                if(xhr.status >= 200 && xhr.status <= 300){
                    // 成功的状态
                    resolve({
                        status:xhr.status,
                        message:xhr.statusText,
                        body:xhr.response
                    })
                }else{
                    reject(new Error('请求失败，失败的状态码为' + xhr.status))
                }
            }
        }
    })
}

axios.get = function(url,options){
    // 发送 AJAX 请求 GET
    return axios(Object.assign(options,{method:'GET',url}))
}

axios.post = function(url,options){
    // 发送 AJAX 请求 GET
    return axios(Object.assign(options,{method:'POST',url}))
}

axios.put = function(url,options){
    // 发送 AJAX 请求 GET
    return axios(Object.assign(options,{method:'PUT',url}))
}

axios.delete = function(url,options){
    // 发送 AJAX 请求 GET
    return axios(Object.assign(options,{method:'DELETE',url}))
}

<script>
       // 函数
    //    axios({
    //        // 请求的类型
    //        method:'POST',
    //        // 请求的url
    //        url:'https://api.apiopen.top/getJoke',
    //        // url参数
    //        params:{
    //            a:100,
    //            b:200
    //        },
    //        // 请求体
    //        data:{
    //            c:300,
    //            d:400
    //        }
    //    }).then(response =>{
    //        console.log(response)
    //    })

    //    axios({
    //        // 请求的类型
    //        method:'GET',
    //        // 请求的url
    //        url:'https://api.apiopen.top/getJoke',
    //        // url参数
    //        params:{
    //            a:100,
    //            b:200
    //        },
    //        // 请求体
    //        data:{
    //            c:300,
    //            d:400
    //        }
    //    }).then(response =>{
    //        console.log(response)
    //    })

    // axios({
    //        // 请求的类型
    //        method:'PUT',
    //        // 请求的url
    //        url:'https://api.apiopen.top/getJoke',
    //        // url参数
    //        params:{
    //            a:100,
    //            b:200
    //        },
    //        // 请求体
    //        data:{
    //            c:300,
    //            d:400
    //        }
    //    }).then(response =>{
    //        console.log(response)
    //    })

    axios({
           // 请求的类型
           method:'delete',
           // 请求的url
           url:'https://api.apiopen.top/getJoke',
           // url参数
           params:{
               a:100,
               b:200
           },
           // 请求体
           data:{
               c:300,
               d:400
           }
       }).then(response =>{
           console.log(response)
       })
    </script>