js异步解决方案及promise基础

前端开发Kingcean 2020-04-16

js异步解决方案:
回调函数、事件监听、发布订阅、promise、generator、async/await

回调函数引起的问题是回调地狱、使代码可读性和可维护性被破坏

async/await是generator方案的语法糖
async/await和generator方案,相较于Promise而言,有一个重要的优势:Promise的错误需要通过回调函数捕获,try catch是行不通的,而async/await和generator允许try/catch

promise的理解(关键字: 代理对象、三个状态、状态切换机制)
promise对象是一个代理对象,它接受一个执行器作为入参,允许把异步任务的成功和失败分别绑定到对应的出炉方法上去
一个promise实例有3中状态:
pending状态,表示进行中,是promise实例创建后的一个初始状态
fulfilled状态,表示成功完成,这是执行器调用resolve后,达成的状态
rejected状态,表示操作失败,是执行期调用reject后,达成的状态
promise实例的状态是可以改变的,但是只允许被改变一次,当从pending切换为rejected后,就无法再切换到fulfilled,
当promise的状态为fulfilled的时候,就会触发then方法里面的onfulfilled函数,当状态为rejected的时候,就会触发onrejected函数

promise的出现,主要是为了解决异步里面产生的地狱回调

promise的常见方法:
主要有4种:all、race、reject和resolve
Promise.all(iterable): 返回一个新的promise,参数里所有的promise对象都成功时,才触发成功,任何一个promise对象失败立即触发该对象的失败


var p1 = Promise.resolve(‘1号选手‘);
var p2 = ‘2号选手‘;
var p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "3号选手");
});
Promise.all([p1, p2, p3]).then(values => {
console.log(values); // ["1号选手", "2号选手", "3号选手"]
});

Promise.race(iterable): 当参数里任何一个子primise成功或失败后,父promise马上用子promise的成功返回值或失败详情作为参数,调用父promise绑定的相应的处理函数,并返回该promise对象

var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "1号选手");
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 50, "2号选手");
});

// 这里因为 2 号选手返回得更早,所以返回值以 2号选手为准
Promise.race([p1, p2]).then(function(value) {
console.log(value); // "2号选手"
});

promise的then方法参数只能是函数,如果不是函数,会出现值穿透问题,值会穿透到可执行的那个函数那

Promise.resolve(1)
.then(Promise.resolve(2))
.then(3)
.then()
.then(console.log)

// 运行结果:1

相关推荐