$.ajax的封装和异步变同步使用

D_lunar

于 2021-12-03 13:35:19 发布

阅读量887

点赞数

分类专栏： JavaScript 文章标签： ajax javascript

本文链接：https://blog.youkuaiyun.com/D_lunar/article/details/121696554

版权

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用async/await封装$.ajax，实现HTTP请求的同步调用，便于处理POST请求和错误处理。通过实例展示了如何在getContent方法中使用封装后的ajax函数并捕获返回结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、封装 $.ajax

/**
 * 封装 $.ajax请求
 * @param {Object} type GET|POST
 * @param {Object} url
 * @param {Object} data
 */
function request(type, url, data) {
	return new Promise((resolve, reject) => {
		$.ajax({
			type: type,
			url: httpUrl + url,
			data: data,
			dataType: "json",
			headers: {
				Authorization: 'Bearer ' + ConfigInfo.TOKEN
			},
			success: function(res) {
				// console.log(JSON.stringify(res));
				resolve(res)
			},
			error: function(err) {
				// console.log(JSON.stringify(err));
				reject(JSON.parse(err.responseText));
			}
		});
	})
}

2、使用async 和await将异步操作变为同步操作，等待$.ajax请求的结果。

async getContent(){
    try {
		let res = await request("POST", "/api/XXX/XXXX", data);
		console.log(res);
        //do something
		
    } catch (err) {
	    console.log(err.Message || "未知错误");
	}

}