fetch请求入坑

2017-11-15  本文已影响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'
上一篇下一篇

猜你喜欢

热点阅读