封装原生fetch/ajax请求

/**

基于fetch请求 MDN文档
@param {"GET"|"POST"|"PUT"|"DELETE"} method 请求方法
@param {string} url 请求路径
@param {object} data 请求参数对象
@param {number} timeout 超时毫秒
*/
function fetchRequest(method, url, data = {}, timeout = 5000) {
let body = null;
let query = "";
if (method === "GET") {
// 解析对象传参
for (const key in data) {
query += &${key}=${data[key]};
}
if (query) {
query = "?" + query.slice(1);
}
} else {
// 若后台没设置接收 JSON 则不行需要跟 GET 一样的解析对象传参
body = JSON.stringify(data);
}
return new Promise((resolve, reject) => {
fetch(url + query, {
// credentials: "include", // 携带cookie配合后台用
// mode: "cors", // 貌似也是配合后台设置用的跨域模式
method: method,
headers: {
"Content-Type": "application/json"
// "Content-Type": "application/x-www-form-urlencoded"
},
body: body
}).then(response => {
// 把响应的信息转为json
return response.json();
}).then(res => {
resolve(res);
}).catch(error => {
reject(error);
});
setTimeout(reject.bind(this, "fetch is timeout"), timeout);
});
}

function clickFetchRequest() {
fetchRequest("GET", "http://192.168.10.220:8000/bg/common/pm/category/", {
page: 1,
per_page: 10
}).then(res => {
console.log("Fetch success", res);
}).catch(err => {
console.warn("Fetch fail", err);
})
}

/**

XMLHttpRequest请求 MDN文档
@param {object} params 传参对象
@param {string} params.url 请求路径
@param {"GET"|"POST"|"PUT"|"DELETE"} params.method 请求方法
@param {object} params.data 传参对象（json）
@param {FormData|string} params.formData form表单式传参：上传图片就是使用这种传参方式；使用formData时将覆盖data
@param {{ [key: string]: string }} params.headers XMLHttpRequest.header设置对象
@param {number?} params.overtime 超时检测毫秒数
@param {(result?: any, response: XMLHttpRequest) => void} params.success 成功回调
@param {(error?: XMLHttpRequest) => void} params.fail 失败回调
@param {(info?: XMLHttpRequest) => void} params.timeout 超时回调
@param {(res?: ProgressEvent) => void} params.progress 进度回调（暂时没用到）
*/
function ajax(params) {
if (typeof params !== "object") return console.error("ajax 缺少请求传参");
if (!params.method) return console.error("ajax 缺少请求类型 GET 或者 POST");
if (!params.url) return console.error("ajax 缺少请求 url");
if (typeof params.data !== "object") return console.error("请求参数类型必须为 object");

const XHR = new XMLHttpRequest();
/** 请求方法 /
const method = params.method;
/* 超时检测 /
const overtime = typeof params.overtime === "number" ? params.overtime : 0;
/* 请求链接 /
let url = params.url;
/* 非GET请求传参 /
let body = null;
/* GET请求传参 */
let query = "";

// 传参处理
if (method === "GET") {
// 解析对象传参
for (const key in params.data) {
query += "&" + key + "=" + params.data[key];
}
if (query) {
query = "?" + query.slice(1);
url += query;
}
} else {
body = JSON.stringify(params.data); // 若后台没设置接收 JSON 则不行，需要使用params.formData方式传参
}

// 监听请求变化；XHR.status learn: http://tool.oschina.net/commons?type=5
XHR.onreadystatechange = function () {
if (XHR.readyState !== 4) return;
if (XHR.status === 200 || XHR.status === 304) {
typeof params.success === "function" && params.success(JSON.parse(XHR.response), XHR);
} else {
typeof params.fail === "function" && params.fail(XHR);
}
}

// 判断请求进度
if (params.progress) {
XHR.addEventListener("progress", params.progress);
}

// XHR.responseType = "json"; // 设置响应结果为json这个一般由后台返回指定格式，前端无配置
// XHR.withCredentials = true; // 是否Access-Control应使用cookie或授权标头等凭据进行跨站点请求。
XHR.open(method, url, true);

// 判断传参类型，json或者form表单
if (params.formData) {
body = params.formData;
} else {
// 设置一个默认为 json 请求的头配置
XHR.setRequestHeader("Content-Type", "application/json");
}

// 判断设置配置头信息
if (params.headers) {
for (const key in params.headers) {
const value = params.headers[key];
XHR.setRequestHeader(key, value);
}
}

// 在IE中，超时属性只能在调用 open() 方法之后且在调用 send() 方法之前设置。
if (overtime > 0) {
XHR.timeout = overtime;
XHR.ontimeout = function () {
console.warn("XMLHttpRequest 请求超时 !!!");
XHR.abort();
typeof params.timeout === "function" && params.timeout(XHR);
}
}

XHR.send(body);
}

function ajaxRequest() {
const error = {
message: "",
info: null
}
ajax({
url: "http://che.qihao.lzei.com/api/app/parking",
method: "POST",
data: {
appkey: "e2fb20ea3f3df33310788a4247834c93",
token: "2a11d6d67a8b8196afbcefbac3e0a573",
page: "1",
limit: "7",
longitude: "113.30764968",
latitude: "23.1200491",
sort: "distance",
order: "asc"
},
overtime: 5000,
success: function (res, response) {
console.log("请求成功", res);
console.log("原始响应数据 >>", response);
},
fail: function (err) {
error.message = "接口报错，请看 network";
error.info = err;
if (err.response.charAt(0) == "{") {
error.info = JSON.parse(err.response);
}
console.log("请求失败", error);
},
timeout: function (info) {
error.message = "请求超时";
error.info = info;
console.log(error);
},
progress: function (e) {
if (e.lengthComputable) {
let percentComplete = e.loaded / e.total
console.log("请求进度", percentComplete, e.loaded, e.total);
}
console.log(e);
}
});
}

        case "POST":
            if (sendData) {
                sendData = sendData.slice(1);
            }
            break;
    }
    XHR.onreadystatechange = function () {
        if (XHR.readyState !== 4) return;
        if (XHR.status === 200 || XHR.status === 304) {
            typeof success === "function" && success(XHR.response);
        } else {
            typeof fail === "function" && fail(XHR);
        }
    }
    XHR.open(method, url, true);
    XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    XHR.send(sendData);
}

})();

posted @ 2021-11-23 19:33 举个栗子走天下阅读(112) 评论(0) 收藏举报

刷新页面返回顶部