js请求封装ajax、统一响应

简单封装一个ajax请求，可自行调整响应内容

用法

// 引入
<script src="/res/js/request.js"></script>

<script>
// 完整get例示
request.get('/url', {
    // 参数
    data: {id: 123},
    // 请求头
    // headers: {token:456},
    // 同步执行
    // async: false,
    // 请求完成处理
    success(res) {
    },
    // 错误处理
    error(data,xhr) {
    },
    // 完成处理
    finally(){
    }
})

// 简易例示
// post
request.post('/login', {
    // 参数
    data: {username: 123, password: 123},
    // 请求完成处理
    success(res) {
        // 登录成功处理
        alert(res.msg)
    },
})
</script>

接口

request.get(url, options)
request.post(url, options)

入参

• url: 请求的后端地址
• options 参数，例如入参、请求头、成功、失败、最终回调：

{
  data: {},
  headers: {},
  async: true,
  success: (data, xhr)=>{},
  error: (data,xhr)=>{},
  finally: ()=>{},
}

request.js

function ajax(options) {
    // 创建 ajax 对象
    var xhr = new XMLHttpRequest()
    var params = ''
    // 循环用户传递进来的对象格式参数
    if (options.data) {
        for (var attr in options.data) {
            // 将参数 转换为 字符串格式 必须编码，否则特殊符号丢失，例如 + 号等
            params += attr + '=' + window.encodeURIComponent(options.data[attr]) + '&'
        }
        // 将参数最后面的'&'截取掉
        // 将截取的结果重新赋值给params 变量
        params = params.substring(0, params.length - 1)
        if (options.type === 'get') {
            // 如果请求方式 为 GET ，直接在url后面拼接参数
            options.url = options.url + '?' + params
        }
    }

    // 配置 ajax 对象
    if (options.async)
        xhr.open(options.type, options.url, options.async)
    else
        xhr.open(options.type, options.url)
    // 请求头
    // 如果是 POST,就在send()方法里面传递 请求参数,且需要 设置 xhr.setRequestHeader
    if (options.type !== 'get') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    }
    if (options.headers) {
        for (let key in options.headers) {
            xhr.setRequestHeader(key, options.headers[key])
        }
    }

    // 监听xhr 对象下面的 onload 事件
    xhr.onload = function () {
        var data = ''
        try {
            data = JSON.parse(xhr.responseText)
        } catch (e) {
            data = xhr.responseText
        }
        if (xhr.status === 200 && options.success) {
            // 返回数据格式：{code:0,msg:'xx'}
            if (data.code !== 0) {
                if (data.code === 9)
                    layer.alert(data.msg, {title: "错误", shade: 0});
                else
                    layer.msg(data.msg, {icon: 2});
            } else
                options.success(data, xhr)
        } else if (options.error)
            options.error(data, xhr)
        if (options.finally) {
            options.finally(xhr)
        }
    }

    // 发送
    if (options.type === 'get') {
        xhr.send()
    } else {
        if (params)
            xhr.send(params)
        else if (options.data && options.headers && options.headers['Content-Type'] === 'application/json')
            xhr.send(JSON.stringify(options.data))
        else
            xhr.send()
    }
}

// 开放接口
var request = {
    get: (url, options) => {
        ajax({
            ...options,
            url: url,
            type: 'get',
        })
    },
    post: (url, options) => {
        ajax({
            ...options,
            url: url,
            type: 'post',
        })
    }
}
// get
/*
request.get('/url', {
    // 参数
    data: {id: 123},
    // 请求头
    // headers: {token:456},
    // 同步执行
    // async: false,
    // 请求完成处理
    success(res) {
    },
    // 错误处理
    error(data,xhr){
    },
    // 完成处理
    finally(){
    }
})

// post
request.post('/url',{
    // 参数
    data: {id: 123},
    // 请求完成处理
    success(res) {
    },
})
*/