原生JS封装Ajax和AjaxPromise

原生 js 封装一个简单的 ajax 还是很简单的，虽然项目中根本不会要自己封装，但作为一个程序员，我觉得这个能力是必须要有的，要有自己造轮子的能力。以后不论是面试官还是老板问你：没有 XXX 你怎么办？你就回一句：没有劳资自己写一个！

/* 将对象转化为【查询参数字符串】 username=admin&password=123456*/
const _getSearchParams = data => {
    let searchParams = "";
    for (let key in data) searchParams += `${key}=${data[key]}&`
    return searchParams.slice(0, -1);
}

const ajax = conf => {
    // 配置默认值
    const defaultConf = {
        method: "GET",
        onSuccess: (data) => console.log(data),
        onFail: err => console.log(err),
        ...conf
    }

    // 解构
    let { method, url, onSuccess, onFail, data, dataType } = defaultConf;
    // 应该没有不传url的，有的话劝退这个行业算了
    if (!url) throw new Error("你不适合编程")
    let body = null;
    const xhr = new XMLHttpRequest();
    // GET和POST请求的参数携带方式不同，需要分别处理
    method === "GET" && data && (url += `?${_getSearchParams(data)}`)
    method === "POST" && dataType === "form" && (body = _getSearchParams(data))
    method === "POST" && dataType === "json" && (body = JSON.stringify(data))

    // 成功和失败的回调
    xhr.onload = () => onSuccess(xhr.responseText)
    xhr.onerror = (err) => onFail(err)
    xhr.open(method, url);

    // POST请求的form/json数据的特殊处理
    dataType === "form" && xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    dataType === "json" && xhr.setRequestHeader("Content-Type", "application/json")

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

// 这个太简单了就不写注释了，就配置请求，重写成功和失败回调
const ajaxPromise = conf => {
    return new Promise((resolve, rejact) => {
        ajax({
            ...conf,
            onSuccess: data => resolve(data),
            onFail: err => rejact(err)
        })
    })
}