美文网首页
fetch请求入坑

fetch请求入坑

作者: 马贞晓 | 来源:发表于2017-11-15 16:45 被阅读0次

    fetch请求post数据与get数据传输梳理

     fetch(opt) { 
            const { url, ...params } = opt;
            let requestInfo = {
                method: opt["type"] ? opt.type : 'POST',
                mode: 'cors',
                cache: 'no-cache',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            };
            let _URL = url;
            if (params) {
                let _data = JSON.stringify(params["data"] || {});
                let str = _data.replace(/[{}]/ig, "").replace(/:/ig, "=").replace(/\,/ig, "&").replace(/\"/ig,"");
                if (requestInfo.method.toLocaleLowerCase() == "post") {
                    requestInfo.body = str
                } else {
                    _URL = url.indexOf("?") >= 0 ? url + "&" + str : url + "?" + str;
                }
    
            }
    
            return fetch(_URL, requestInfo)
                .then(res => {
                
                    return res.json()
                        .catch(arg => {
                            iss.popover({content:"提交服务器失败!"})
                            //return arg;
                           return Promise.reject({errorcode:"444",data:requestInfo,message:`服务器错误`,url:_URL});
                        });
                })
                .then(res=>{
                    if (res["errorcode"] &&res.errorcode == "200") {
                        return res;
                    }else if(res["errorcode"] &&res.errorcode == "302"){
                        iss.popover({content:"登陆超时请重新登陆!"});
                        top.window.location.href = "/account/Login";
                    }else if(res["errorcode"]&&res["errorcode"] == "300"){
                        iss.popover({content:"操作失败,请联系后台工作人员!"});
                        return Promise.reject(res);
                    }else{
                        return Promise.reject(res);
                    }
                })
                .catch(arg => {
                    //console.log(arg);
                    
                    return Promise.reject(arg);
                })
        }  
    

    1、跨域

    cors是表明可否通过header跨域。
    credentials表明是否在跨域的时候可以传数据,比如cookie等信息。
    credentials为真的时候,服务段不能用*来匹配,必须要指定一个完整的域信息
    

    2、post数据提交

    let Params = new URLSearchParams()
    Params.append("key","value")
    

    这种方式比较低效,于是给出一个高效解决方案,直接正则替换,让body值等于解析后字符串“xxx=xx&xx=x”即可

     let data = JSON.stringify(params["data"] || {});
     let str = data.replace(/[{}]/ig, "").replace(/:/ig, "=").replace(/\,/ig, "&").replace(/\"/ig,"");
    

    3、get数据请求,因为直接给str前+?不写如body
    4、FormData 需要修改请求头需要 new FormData append的方式传入body中

       'Content-Type':'multipart/form-data'
    

    相关文章

      网友评论

          本文标题:fetch请求入坑

          本文链接:https://www.haomeiwen.com/subject/hkkhvxtx.html