【Ajax】

前端Ajax的封装

目录

前言

一、Ajax是什么？

二、封装

总结 

前言

通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势在于无需刷新就可以获取数据。

封装Ajax有助于我们更加便利的调用其封装好的函数进行数据获取和操作，重点在于消除编程过程中重复的代码，其中也包含了错误识别和数据类型识别。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Ajax是什么？

AJAX全称是Asynchronous JavaScript And XML,就是异步的JS和XML；

Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

二、封装

<script>

        const axios = {

            get(url, param = {}) {

                //返回的是promise对象,但是我们不处理,继续当做get的返回值

                return this.http('get', url, param)

            },

            post(url, param = {}) {

                //url 和param 不能为空且必须是对象

                return this.http('post', url, param)

            },

            // 将get和post中重复的代码,封装到下面方法

            http(type, url, param) {

                if (!url || !param) throw new Error('url或param不能为空');

                if (param.toString() != '[object Object]') throw new Error('param必须是对象');

                let xhr = new XMLHttpRequest();

                // 遍历传递的参数,进行拼接

                let str = '';

                for (let attr in param) {

                    str = str + '&' + attr + '=' + param[attr]

                }

                // 截取 下标为&以后的有效字符串

                str = str.substr(1);

                // 如果是get请求 参数拼接到url后面

                if (type == 'get' && str) {

                    url = url + '?' + str;

                }

                return new Promise((resolve, reject) => {

                    xhr.open(type, url);

                    //设置请求头

                    type == 'post' && xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

                    xhr.send(str);

                    xhr.onload = function () {

                        // 有的返回结果是 json字符串,有的是普通字符串,我们需要把json转化

                        let res = '';

                        try { // 可能出错的代码

                            res = JSON.parse(xhr.response)

                        } catch { // 出了错误之后怎么办,json解析失败

                            res = xhr.response

                        } finally { // 不管成功还是失败都走这里

                            resolve(res)

                        }

                    }

                    xhr.onerror = function (abc) {

                        reject(abc)

                    }

                })

            }

        }

    </script>

总结 

通过Ajax的封装，我们将更加便利的调用封装好的函数进行变成，减少了代码的重复利用，缩减了内存占用，同时，也为JS初学者对于函数化编程的思维模式有所帮助，大家快来跟我一起学习吧！