Ajax：自己用原生JS封装ajax请求函数

最新推荐文章于 2023-09-20 10:27:08 发布

奄奄一息的一条咸鱼

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量620

点赞数

分类专栏： Ajax 文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/weixin_46682277/article/details/122854007

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

分成两个页面，一个html页面，一个js页面
html页面代码：

<body>
    <button onclick="testGet()">测试get请求</button>
    <button onclick="testForm()">测试post请求之form-data格式</button>
    <button onclick="testStr()">测试post请求之/x-www字符串格式</button>
    <button onclick="testJson()">测试post请求之Json格式</button>
    <script src="./myaxios.js"></script>
    <script>
        // 通过自己封装的ajax函数发起get或post请求
        // get请求
        function testGet() {
            axios({
                url: 'http://toutiao.itheima.net/v1_0/channels',
                params: {
                    name: 'Alex',
                    age: 23,
                    sex: 'women'
                }
            }).then(res => {
                console.log(res)
            })
        }

        // post请求之FormData格式 文件上传
        function testForm() {
            let fm = new FormData()
            fm.append('name', 'Piper')
            fm.append('age', '26')
            axios({
                url: 'http://www.liulongbin.top:3006/api/post',
                method: 'post',
                data: fm
            }).then(res => {
                console.log(res)
            })
        }

        // post请求之/x-www字符串格式
        function testStr() {
            axios({
                url: 'http://www.liulongbin.top:3006/api/post',
                method: 'post',
                data: 'name:Bob&age:22'
            }).then(res => {
                console.log(res)
            })
        }

        // post请求之json格式
        function testJson() {
            axios({
                url: 'http://www.liulongbin.top:3006/api/post',
                method: 'post',
                data: {
                    name: 'Alice',
                    height: '165cm',
                    age: 24
                }
            }).then(res => {
                console.log(res)
            })
        }
    </script>
</body>

myaxios.js页面代码

// 自己用原生JS封装ajax请求函数
// axios中的参数会传入一个对象
// 对象里有url、method、params、data，可以通过解构赋值的方式直接写到参数内
// 且给method赋上默认值为get，这样即便不写method:'get'也是可以的
function axios({ url, method = 'get', params, data }) {
    // 返回Promise对象
    return new Promise(function (resolve, reject) {
        try {
            let xhr = new XMLHttpRequest()
            // 判断是否有params对象，且params对象中是否有参数，如果有参数需要拼接字符串，没有则不拼接
            // Object.keys().length可以判断对象中是否有数据，length为0则表示没有数据，而0转成布尔值是false
            if (params && Object.keys(params).length) {
                // 处理params拼接
                let query = []
                for (let key in params) {
                    query.push(`${key}=${params[key]}`)
                }
                xhr.open(method, url + '?' + query.join('&'))
            } else {
                xhr.open(method, url)
            }
            // 监听ajax返回的数据结构
            xhr.addEventListener('load', function () {
                // 当数据有响应时，会得到返回的数据
                // xhr.response得到的是json字符串
                resolve(JSON.parse(xhr.response))
            })
            // 处理请求体参数
            // 如果请求类型不是get且data对象中有数据
            if (method.toLowerCase() !== 'get' && data) {
                // 1.判断data是不是FormData类型  用instanceof
                if (data instanceof FormData) {
                    // 设置请求头类型为Form-Data类型
                    xhr.setRequestHeader('Content-Type', 'multipart/form-data')
                    xhr.send(data)
                    return
                }
                // 2.判断data是不是x/www- 字符串类型
                if (typeof data === 'string') {
                    // 设置请求头类型为application/x-www-form-urlencoded类型
                    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                    xhr.send(data)
                    return
                }
                // 3.判断data是不是json格式
                if (data instanceof Object) {
                    // 设置请求头类型为application/json类型
                    xhr.setRequestHeader('Content-Type', 'application/json')
                    xhr.send(JSON.stringify(data))
                    return
                }
            }
            // 发送ajax请求
            xhr.send()
        } catch (err) {
            reject(err)
        }
    })
}