函数式编程封装ajax，并实现缓存机制_设计一个带缓存功能的 ajax 请求函数-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40677590/article/details/107376192

本文介绍如何使用函数式编程思想封装Ajax请求并实现数据缓存。通过定义请求配置，利用XMLHttpRequest进行同步请求，结合memoize函数实现缓存机制，确保初次调用API获取数据后，后续请求直接从缓存中读取，提高效率。

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

使用函数式编程，封装ajax，并实现数据的缓存

调用一次api，后面再调用api都是返回缓存数据

var requestConfig = {
	type: 'get', //请求类型
	url: 'http://localhost:38081/mis/test-success', //请求的url 
	data: null, //请求的数据，类型自定义
	isCache: true, //是否缓存结果
	isAsync: false //是否异步
} //定义请求体

function getData(requestConfigs) {
	xmlhttp = new XMLHttpRequest(); //创建实例
	xmlhttp.onreadystatechange = function () {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			responseData = xmlhttp.responseText
		}
	}
	xmlhttp.open(requestConfigs.type, requestConfigs.url, false); //指定同步ajax请求
	xmlhttp.send(requestConfig.data);
	return responseData
}

function memoize(f) {
	var cache = {};
	return function (requestConfig) {
		var argStr = JSON.stringify(requestConfig.url);
		if (requestConfig.isAsync) {
			setTimeout(() => {
				if (requestConfig.isCache) {
					cache[argStr] = cache[argStr] || f(requestConfig);
				} else {
					cache[argStr] = f(requestConfig);
				}
			});
		} else {
			if (requestConfig.isCache) {
				cache[argStr] = cache[argStr] || f(requestConfig);
			} else {
				cache[argStr] = f(requestConfig);
			}
		}
		return cache[argStr];
	};
}
var pureHttpCall = memoize((requestConfig) => getData(requestConfig));

function callApi() {
	pureHttpCall(requestConfig)
}

涉及的知识点：