ajax“现学现卖”,封装ajax请求

什么是AJAX？

AJAX =Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建快速动态网页的技术。

封装ajax请求

function http({
            url,
            method='GET',
            params={},
            data={}
        }) {
            // 将method值转为大写
            method = method.toUpperCase();

            // 将参数拼接到url上
            if(params) {
                let jointString = null;
                // id=xxx&name=xxx&
                Object.keys(params).forEach(key=> {
                    jointString += `${key}=params[key]&`
                })
                // 将最后的&去掉
               jointString = jointString.subString(0,jointString.length - 1);
               url += url + '?' + jointString;
            }
            

            // 创建xhr实例
            const request = new XMLHttpRequest();
            request.open(method,url,true);//规定请求类型、url、是否异步请求
            if(method == 'GET' || method == 'DELETE') {
                request.send(); //将请求发送到服务器
            } else if(method == 'POST' || method == 'PUT') {
                request.setRequestHeader('content-type','application/json;charset=utf-8'); //设置请求头
                request.send(JSON.stringify(data)); //将请求发送到服务器，携带参数仅用于POST请求
            }
            
            //每当 readyState 改变时，就会触发 onreadystatechange 事件
            request.onreadystatechange = function() {
                // readyState存着XMLHttpRequest的状态
                // 0：请求未初始化
                // 1：服务器连接已建立
                // 2：请求已接收
                // 3：请求处理中
                // 4：请求已完成，且响应已就绪
                if(request.readyState != 4) return;

                // 请求完成返回promise对象
                return new Promise((resolve,reject)=> {
                    const {status, statusText} = request;
                    // 状态码200~299之间都是请求成功
                    if(status>=200 && status <=299) {
                        const response = {
                            status,
                            statusText,
                            data: JSON.stringify(request.response)
                        };
                        resolve(data);
                    } else {
                        const response = {
                            status,
                            statusText,
                        };
                        reject(response);
                    }
                })
            }
        }