本文将整理一下自己对Promise()运行机制的简单理解:
(一)promise()是对 ajax异步请求执行逻辑的梳理(异步请求串行)
先看一下ajax请求的异步处理:
request.onreadystatechange = function(){ if (request.readyState === 4) { if (request.status === 200) { return success(request.responseText); } else { return fail(request.status); } } }
作为开发我们都曾有过异步引起的痛点——异步还没执行完,页面已经渲染完了,所以页面数据和接口数据不同步、事件明明已经绑定了,但是click都是没有效果,发型换了好几个,都没有发现是什么问题,原来只是事件绑定的时候,页面还有渲染(反正刚开始我经常犯这种错误),尤其对于刚入门的小白,还没有很透彻的理解异步到底是怎么一回事,就更摸不到头脑了,必定我们的思维习惯是顺序执行,对于这个问题JQuery框架封装的ajax请求中callback函数已经解决了大部分问题。但是你是否想过,如果这样写会更容易理解:
var ajax = Get('../resquest/url); ajax.ifSuccess()//执行成功之后约定的回调函数 .ifFail() //执行失败之后约定的回调函数
而Promise的出现,让异步请求的执行更加语义化,它将异步请求串行,开始只关注异步请求,承诺(promise)在后面处理请求结果,从此再也不担心异步问题了。
new Promise(function () { //异步函数执行过程 }).then(function (r) { log('Done: ' + r);//成功回调 }).catch(function (reason) { log('Failed: ' + reason);//失败回调 });
(二)使异步请求并行(all)
使用promise.all(),同时进行多个异步请求
var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setTimeout(resolve, 600, 'P2'); }); // 同时执行p1和p2,并在它们都完成后执行then: Promise.all([p1, p2]).then(function (results) { console.log(results); // 获得一个Array: ['P1', 'P2'] });
(三)用于容错(race)
var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setTimeout(resolve, 600, 'P2'); }); Promise.race([p1, p2]).then(function (result) { console.log(result); // 'P1' });
如p1请求先响应,.then()就先用p1的结果,p2仍然在执行,但是结果被废弃。
以上便是我对Promise()一些简单理解,希望可以帮到你~
参考博文:https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000