原生ajax配合Promise封装

封装的采坑总结

注意一点就是post请求设置请求头的时候一定要把设置请求头那段代码放到
open的后面

 // 设置的header头必须要放到open()后面
                    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")

下面就是我的原生封装ajax代码啦

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    myAjax("http://localhost:2005/api/aab", "get", {
        name: "张亿",
        sex: "男"
    })
    myAjax("http://localhost:2005/api/ppt", "post", {
        name: "张亿",
        sex: "男"
    }).then((res) => {
        console.log(res)
    })
    // 原生js封装的ajax
    // 参数一传入地址,参数二传入请求方式,参数三传入请求的字段
    function myAjax(url, method, data) {
        method = method.toLowerCase()
        return new Promise(
            (res, rej) => {
                var xhr = new XMLHttpRequest()
                var dataKeys = Object.keys(data)
                var res1 = dataKeys.reduce(function (pre, now) {
                    return pre += `${now}=${data[now]}&`
                }, "")
                if (method === "get") {
                    xhr.open(method, `${url}?${res1}`)
                    xhr.send()
                } else if (method === "post") {
                    console.log(url)
                    xhr.open(method, `${url}?`)
                    // 设置的header头必须要放到open()后面
                    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
                    console.log(res1)
                    xhr.send(`${res1}`)
                }

                xhr.onreadystatechange = function () {
                    console.log(xhr.readyState, xhr.status)
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var responseObj = {
                            response: xhr.response,
                            status: xhr.status,
                            statusText: xhr.statusText
                        }
                        res(responseObj)
                    }
                    setTimeout(function () {
                        if (xhr.readyState != 4 || xhr.status != 200) {
                            rej("ajax请求发送失败!")
                        }
                    }, 5000)
                }
            }
        )
    }
    </script>