您的位置:首页 > 其它

状态机模式 与 ajax 的结合运用

websocket 2020-06-26 23:16 169 查看 https://www.cnblogs.com/GManba
太神奇了,昨晚做了个梦,梦中我悟出一个道理:凡是涉及到异步操作而且需要返回值的函数,一定要封装成 Promise 的形式,假如返回值取决于多个异步操作的结果,那么需要对每个异步操作进行状态的设计,而且需要封装一个 next 函数。😂😂😂,到了晚上才觉到很有意思,所以结合 ajax 设置最短返回时间 和 最大返回时间进行实践: ``` const PENDING = 'PENDING' const RESOLVED = 'RESOLVED' const REJECTED = 'REJECTED' const FULLFILLED = 'FULLFILLED' /** * @desc 异步操作模拟 * @param time 响应时间 * @param isError 是否抛错 */ const mock = (time, isError) => { return new Promise((resolve, reject) => { setTimeout(() => { if (!isError) { resolve({ user: 'ManbaX' }) } else { reject('request error') } }, time) }) } /** * @desc 生产不同类型请求的工厂函数 * @param time 响应时间 * @param isError 是否抛错 */ var RequestFactory = function (time, isError) { var request = function () { return new Promise((resolve, reject) => { var min = PENDING var max = PENDING var state = PENDING var res = null var next = function (name) { const cb = function () { if (state === RESOLVED) { resolve(res) } else { reject(res) } } if (name === 'res' && min === FULLFILLED) { cb() } if (name === 'min' && (state === RESOLVED || state === REJECTED)) { cb() } if (name === 'max' && state === PENDING) { reject('timeout') } } setTimeout(() => { min = FULLFILLED next('min') }, 500) setTimeout(() => { max = FULLFILLED next('max') }, 1000) mock(time, isError).then(data => { res = data state = RESOLVED next('res') }).catch(error => { res = error state = REJECTED next('res') }) }) } return request } // 不超时, 不返回错误 console.time('r1') RequestFactory(200)().then(res => { console.log('data: ', res) }).finally(() => { console.timeEnd('r1') }) // 不超时, 返回错误 console.time('r2') RequestFactory(200, true)().catch(err => { console.log('error', err) }).finally(() => { console.timeEnd('r2') }) // 超时 console.time('r3') RequestFactory(2000)().catch(res => { console.log('error: ', res) }).finally(() => { console.timeEnd('r3') }) console.time('r4') RequestFactory(2000)().catch(res => { console.log('error: ', res) }).finally(() => { console.timeEnd('r4') }) ``` ![](https://img2020.cnblogs.com/blog/2032346/202006/2032346-20200626231503286-1150836422.png) 上面的运行结果符合预期,本来梦中还有另外一个有意思的东西,但是太模糊了就搞忘记了,下次一定早点记录。
标签: