调用ajax

ajax({
    method: 'post',
    url: '/upload',
    data,
    success(data) {
        // console.log('data', data);
        data = JSON.parse(data);
    },
    onprogress(ev) {
        // console.log('ev',ev);
        progressElement.style.width = (ev.loaded/ev.total) * 100 +'%';
    }
})

封装ajax

// 空函数  占位函数
function noop() {}
function ajax(options){
    options = {
        ...{
            method:'get',
            url:'',
            success: noop,
            onprogress: noop
        },
        ...options
    }

    // 处理queryString的数据
    if(options.query){
        let queryString = queryParse(options.query);
        options.url += '?' + queryString;
    }

    // 创建一个ajax对象
    let xhr = new XMLHttpRequest();
    // 请求的回调函数
    xhr.onload = function(){
        options.success(xhr.responseText);
    }
    xhr.upload.onprogress = options.onprogress;
    xhr.upload.onload = options.onload;

    // 设置ajax请求参数
    xhr.open(options.method,options.url,true);
    // 通过body发送的数据有N多种格式的
    // 使用js内置的一个对象完成
    let bodyData = null;
    if(options.data){
        bodyData = bodyParse(options.data);
    }

    // 发送请求
    xhr.send(bodyData);
}

function queryParse(obj){
    let arr = [];
    for(let key in obj){
        arr.push(`${key}=${obj[key]}`);
    }
    return arr.join('&');
}
function bodyParse(obj){
    let fd = new FormData();
    for(let key in obj){
        fd.append(key,obj[key]);
    }
    return fd;