cocos creator如何实现网络请求http之封装_cocos creator http

摘要
cocos creator http请求。在 Cocos Creator 中，我们使用的标准网络接口：
XMLHttpRequest：用于短连接
WebSocket：用于长连接
今天我们说一下短连接的封装。

环境
cocos Creator 引擎2.4.3
编辑工具HBuild X

最终效果
体验一下

效果图如下，我们获取一个抽奖列表，展示

简单示例：

	let xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
         var response = xhr.responseText;
         console.log(response);
     }
 };
 xhr.open("GET", url, true);
 xhr.send();

1
2
3
4
5
6
7
8
9
10

开发者可以直接使用 new XMLHttpRequest() 来创建一个连接对象。

上面的代码并没有封装，下面我们来将代码封一下

封装代码

//短链接请求
cc.http = function(options) {
	return new Promise((resolve, reject) => {
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
				var res = JSON.parse(xhr.responseText);
				resolve(res);
			}
		};
		xhr.timeout = options.timeout || 50000; // 5 seconds for timeout
		var method = options.method || 'GET';
		var url = options.url;
		options.data = options.data || {};
		if (method == 'get' || method == "GET") {
			var url = options.url + '?' + cc.vv.keyObject(options.data);
			xhr.open(method, url, true);
			xhr.send();
		} else {
			xhr.open(method, options.url, true);
			xhr.setRequestHeader("Content-type", "application/json;charset=utf-8");
			xhr.send(JSON.stringify(options.data));
		}
	});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

上面的封装代码满足get，post的请求

结语：
欢迎加入微信群一起学习讨论!