前言

附上前面几篇博文链接，希望有收获的同学点个赞，一起交流，一起学习，不胜感激~
①50个前端开发小技巧总结，提升你的竞争力，抓住金三银四的小尾巴
②cocoscreator实战开发，JavaScript的call，apply运用，实现简单高效的事件监听与派发
③【实战运用】定点数，位运算符及其在开发中的实际运用

一.http状态码简述

HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：
1XX：信息，服务器收到请求，需要请求者继续执行操作
2XX：成功，操作被成功接收并处理
3XX：重定向，需要进一步的操作以完成请求
4XX：客户端错误，请求包含语法错误或无法完成请求
5XX：服务器错误，服务器在处理请求的过程中发生了错误

二.XMLHttpRequest 对象简述

XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象能够实现：1.在不重新加载页面的情况下更新网页。2.在页面已加载后从服务器请求数据。3.在页面已加载后从服务器接收数据。4.在后台向服务器发送数据。
所有现代的浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 的属性与方法详细可以查看链接: link.

三.cocoscreator对XMLHttpRequest 的支持

Cocos Creator 支持 Web 平台上最广泛使用的标准网络接口：
1.XMLHttpRequest：用于短连接
2.WebSocket：用于长连接
需要注意的是：
1.如果需要在原生平台使用 WebSocket，构建项目之前需要在项目 -> 项目设置 -> 模块设置中勾选了 Native Socket 模块。
2.创建XMLHttpRequest对象，可以直接使用 new XMLHttpRequest() 来创建，也可以通过 cc.loader.getXMLHttpRequest() 来创建，两者效果一致。

四.JavaScript的promise对象简述

ECMAscript 6 原生提供了 Promise 对象，Promise 是异步编程的一种解决方案，身上有all、reject、resolve这几个方法，原型上有then、catch等方法
Promise 对象有以下两个特点:
1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：①pending: 初始状态，不是成功或失败状态。②fulfilled: 意味着操作成功完成。③rejected: 意味着操作失败。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态
2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
Promise 优缺点
有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
promise实用的地方就是解决了回调嵌套和执行顺序问题。
all的用法：all接收一个数组参数，里面的值最终都算返回Promise对象。谁跑的慢，以谁为准执行回调。Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
race的用法：谁跑的快，以谁为准执行回调race的使用场景

五.代码实现超时重连

let HTTP = {}
let reqTime = 0;//记录请求次数

//执行一次请求
HTTP.RequestOnce = function (url) {
    return new Promise((resolve, reject) => {
        let onTimeout = () => {
            reject('请求超时')
        }
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (4 == xhr.readyState) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.response)
                } else {
                    reject('请求失败')
                }
            }
        };
        xhr.open("GET", url, true);
        //当我们需要往http头文件修改或添加参数时就用setRequestHeader 方法。
        //CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示
        xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
        xhr.timeout = 5000; // 超时设置为5s
        // 网络层的超时与错误处理统一走超时错误
        onTimeout && (xhr.ontimeout = onTimeout);
        onTimeout && (xhr.onerror = onTimeout);
        xhr.send();
    })

};
HTTP.RequestMoreTry = function (url, times) {
    console.error('执行' + url + '请求，请求第' + (++reqTime) + '次尝试')
    return HTTP.RequestOnce(url)
        .then((response) => {
            Promise.resolve(response)
        })
        .catch((err) => {
            let timesRetry = times > 0
            console.error('第' + reqTime + '次请求失败', err);
            timesRetry ? HTTP.RequestMoreTry(url, times - 1) : Promise.reject(err)
        })
}
//注意，先回执行一次请求，失败之后，才会进行三次重连，所以一共请求次数是4次
HTTP.RequestMoreTry("www.baidu.come/xxxxx/xxxxx", 3)

运行结果如下：

六.参考引用

1.https://www.runoob.com/http/http-status-codes.html
2.https://www.w3school.com.cn/xml/xml_http.asp
3.https://docs.cocos.com/creator/manual/zh/scripting/network.html?h=getxmlhttprequest
4.https://www.cnblogs.com/billyrun/articles/12124584.html

【开发实战】promise实现超时自动n次重连