js异步解决方案及promise基础

Posted 2021-02-28 小小泡zdy

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