【原生js-ES6】二次封装一个ES6的post请求

使用:

1. 接口、map格式键值对数据、与最终object格式数据datas。body的数据流不能使用JSON.stringfy来string化,直接使用map来拼接成兼容模式body的数据流;

2. 代码中console_log()和alert_txt()为本人自定义的函数,你可以换成log函数和alert函数;

3. 本post应该可以应该可以发送最大2M的数据流。

-

所有fetch代码如下:

    // 请求数据
    // POST跨域
    const post_api = api_url+"login_check";
    const map = new Map([ // 要提交数据
        ["username", username],
        ["token",  token],
    ]);
    // 拼装post要提交的数据
    let body = "";
    for (let [k, v] of map) { body += k+"="+v+"&"; } console_log(body);
    fetch(post_api, {
        method: "post",     // get/post
        mode: "cors",       // same-origin/no-cors/cors
        cache: "no-cache",  // 不缓存
        headers: {
            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        body: body,         // 格式:"key1=val1&key2=val2"
    }).then(function (response){
        if (response.status === 200){
            return response;
        }
    }).then(function (data) {
        return data.text();
    }).then(function(text){
        // 格式校验
        let back = null;
        let datas = null;
        if (typeof text === "string"){ // TP一般返回string
            back = text;
            datas = JSON.parse(text);
        }else if (typeof text === "object"){ // laraval一般返回object
            back = JSON.stringify(text);
            datas = text;
        }
        console_log("类型:" + typeof text + "\n数据:" + back);
        // 解析与渲染数据 datas
        if (datas.state === 0){
            console_log(datas.msg);

        }else if (datas.state === 1){
            // 其他


        }

    }).catch(function(error){
        console.log("Fetch错误:" + error);
        alert_txt("接口请求错误或者网络不通", 2500);
    });

-

可以对比jQ的post请求:

    // 请求数据
    $.ajax({
        url: api_url+"admin/sys/record_operation",
        type: "POST",
        dataType: "json",
        async: true,
        data: { // 字典数据
            active_explain: active_explain,
            func_name: func_name,

        },
        success: function(back, status){

            var datas = data = "";
            if(typeof back === "string"){
                datas = JSON.parse(back);
                data = back;
            } else {
                datas = back;
                data = JSON.stringify(back)
            }
            console_log("类型:" + typeof back + "\n数据:" + data +"。\n状态:" + status + "。");
            // 解析与渲染数据 datas
            if (datas.state===0){
                console_log(datas.msg);

            }else if (datas.state===1) {
                console_log(datas.msg);
                // 其他

            }
        },
        error: function (xhr) {
            console.log(xhr);
            alert_txt("接口请求错误或者网络不通", 2500);
        }
    });

-

你可能感兴趣的:(js/大前端)