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'