在项目中,特别是没有用vue或是一些其他的大型前端框架时,发请求一般采用jQuery提供的ajax方法,请求很多时,就需要将ajax封装为一个公共方法用来减少代码冗余,这里使用promise对象来处理返回数据。
1、get请求的封装
其实几个请求的封装大同小异,get请求会详细作为例子详细描述。
var baseUrl = "基地址"; //用于拼接之后请求的url
//全局公共请求方法
var funAjax = {
get: (url, async, data, method = "get") => {
return new Promise((resolve, reject) => {
// 这里可以使用一些小的插件来显示正在请求
// 加载中动画开启
//设置默认异步请求
/*此处同步请求: 同步请求(Synchronous Request):在发送请求时,JavaScript 引擎会等待请求完成并且收到响应,然后才会继续执行后续的代码。执行阶段会被阻塞,直到接收到请求的结果。这意味着,同步请求会阻塞后续的代码执行,直到请求完成,页面可能会出现“假死”状态。同步请求不适用于长时间的操作,因为它会冻结页面并阻塞用户的交互,异步请求则不用等待返回结果,根据情况设置参数
*/
if (async == "" || async == null || typeof async == "undefined") {
async = true;
}
$.ajax({
url: baseUrl + url,
type: method,
async: async,
dataType: "json",
data: JSON.stringify(data),
headers: {
Token: localStorage.getItem("token"), //自定义请求头 此处我的token配置自动获取。根据自己配置位置进行获取
"Content-Type": "application/json;charset=utf8",
},
success: function (ret) {
// 加载中动画关闭
// loading && loading.close();
if (ret.code == 200) {
resolve(ret);
} else {
if (ret.code == 401) {
//给用户提示登录超时,您需要重新登录 并返回登录页面,清空请求头
setTimeout(() => {
localStorage.setItem("token", null);
window.open("login.html");
}, 1500);
}
reject(ret);
}
},
error: function (err) {
//console.log(JSON.stringify(err));
// 加载中动画关闭
// statusCode--->网络请求状态码,数字类型
// code--->错误码,数字类型。(0:连接错误、1:超时、2:授权错误、3:数据类型错误、4:不安全的数据) 可以自己根据后端的返回数据来编写对应错误的提示
if (err.statusCode == 1) {
//提示用户请求超时,请稍后再试
}
reject(err);
},
});
});
},
//发起get请求示例:
funAjax.get(`url`,true,'').then((res) => {
//请求成功
if (res.code == 200) {
//状态码为200,处理返回的数据,返回的数据
}
}).catch((err) => {
//错误处理 错误信息在err中
});
2、post请求的封装
post: (url, async, data, method = "post") => {
return new Promise((resolve, reject) => {
// 加载中动画开启
//设置默认异步请求
if (async == "" || async == null || typeof async == "undefined") {
async = true;
}
$.ajax({
url: baseUrl + url,
type: method,
async: async,
dataType: "json",
data: JSON.stringify(data),
headers: {
Token: localStorage.getItem("token"), //自定义请求头
"Content-Type": "application/json;charset=utf8",
},
success: function (ret) {
// 加载中动画关闭
if (ret.code == 200) {
resolve(ret);
} else {
if (ret.code == 401) {
//登录超时,您需要重新登录
setTimeout(() => {
localStorage.setItem("token", null);
window.open("login.html");
}, 1500);
}
reject(ret);
}
},
error: function (err) {
//console.log(JSON.stringify(err));
// 加载中动画关闭
// statusCode--->网络请求状态码,数字类型
// code--->错误码,数字类型。(0:连接错误、1:超时、2:授权错误、3:数据类型错误、4:不安全的数据)
if (err.statusCode == 1) {
//请求超时,请稍后再试
}
reject(err);
},
});
});
},
//发起post请求示例:
funAjax.post(`url`,true,data).then((res) => {
//请求成功
if (res.code == 200) {
//状态码为200,处理返回的数据,返回的数据
}
}).catch((err) => {
//错误处理 错误信息在err中
});
3、put请求的封装
put: (url, async, data, method = "put") => {
return new Promise((resolve, reject) => {
// 加载中动画开启
//设置默认异步请求
if (async == "" || async == null || typeof async == "undefined") {
async = true;
}
$.ajax({
url: baseUrl + url,
type: method,
async: async,
dataType: "json",
data: JSON.stringify(data),
headers: {
Token: localStorage.getItem("token"), //自定义请求头
"Content-Type": "application/json;charset=utf8",
},
success: function (ret) {
// 加载中动画关闭
// loading && loading.close();
if (ret.code == 200) {
resolve(ret);
} else {
if (ret.code == 401) {
//登录超时,您需要重新登录
setTimeout(() => {
localStorage.setItem("token", null);
window.open("login.html");
}, 1500);
}
reject(ret);
}
},
error: function (err) {
//console.log(JSON.stringify(err));
// 加载中动画关闭
// statusCode--->网络请求状态码,数字类型
// code--->错误码,数字类型。(0:连接错误、1:超时、2:授权错误、3:数据类型错误、4:不安全的数据)
if (err.statusCode == 1) {
// 请求超时,请稍后再试
}
reject(err);
},
});
});
},
4、delete请求的封装
delete: (url, async, data, method = "delete") => {
return new Promise((resolve, reject) => {
// 加载中动画开启
//设置默认异步请求
if (async == "" || async == null || typeof async == "undefined") {
async = true;
}
$.ajax({
url: baseUrl + url,
type: method,
async: async,
dataType: "json",
data: JSON.stringify(data),
headers: {
Token: localStorage.getItem("token"), //自定义请求头
"Content-Type": "application/json;charset=utf8",
},
success: function (ret) {
// 加载中动画关闭
// loading && loading.close();
if (ret.code == 200) {
resolve(ret);
} else {
if (ret.code == 401) {
//登录超时,您需要重新登录。
setTimeout(() => {
localStorage.setItem("token", null);
window.open("../../authentication-login.html");
}, 1500);
}
reject(ret);
}
},
error: function (err) {
//console.log(JSON.stringify(err));
// 加载中动画关闭
// statusCode--->网络请求状态码,数字类型
// code--->错误码,数字类型。(0:连接错误、1:超时、2:授权错误、3:数据类型错误、4:不安全的数据)
if (err.statusCode == 1) {
//请求超时,请稍后再试。
}
reject(err);
},
});
});
},
};
5、导出函数
导出funAjax函数,之后在需要使用的页面引入所在的js文件,再使用funAjax.get()或其他使用请求即可。
window.funAjax = funAjax;
注:几个请求都是放在公共函数funAjax中,最后导出引入文件就可以使用。
原文地址:https://blog.csdn.net/weixin_45806058/article/details/132492515
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_9965.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。