封装ajax|集创考核第3篇笔记

76 阅读1分钟

封装ajax

一开始前几天都在着手于封装一个ajax进行考核中的使用,到今天才把封装好的测试完发到笔记上来

// --------------------------------------------------封装ajax----------------------------------------------------------------

        ajax(obj) {
            return new Promise((resolve,reject) => {
                var defaults = {
                    type : 'get',
                    data : {},
                    url : '#',
                }
                // 处理形参,传递参数的时候就覆盖默认参数,不传递就使用默认参数
                for(var key in obj){//把输入的参数与设置的默认数据进行覆盖更新
                    defaults[key] = obj[key];
                }

                //创建xhr对象
                let xhr = new XMLHttpRequest();
                //拼接查询字符串,如: name=zs&age=10
                var theString = this.resolveData(defaults.data)

                // 判断是get请求还是post请求
                if(defaults.type.toUpperCase() === 'GET') {
                    xhr.open(defaults.type,defaults.url + '?' + theString)
                    xhr.send()
                }else if (defaults.type.toUpperCase() === 'POST') {
                    //发起POST请求
                    xhr.open(defaults.type,defaults.url)
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                    xhr.send(theString)
                }

                //监听xhr.onreadystatechange事件
                xhr.onreadystatechange = () => {
                    if(xhr.readyState === 4 && xhr.status === 200) {
                        // 处理成功的结果
                        resolve(JSON.parse(xhr.responseText))
                    } else if(xhr.ready == 4 && xhr.status != 200) {
                        //处理失败的结果
                        reject(xhr.responseText)
                      }
                }
            })
        }

        // 处理data的函数
        resolveData(data) {
            var arr = []
            for(let k in data) {
                arr.push(k + '=' + data[k])
            }
            return arr.join('&')
        }

前段时间测试网上部分公用接口还是可以正常使用的,具体使用等待考核接口完善后进行测试