title

Promise

/* Promise */ class myPromise { constructor(executor) { this.state = 'pending' this.value = undefined this.reason = undefined //存放成功时的方法 this.onResolveCallbacks = [] //存放失败时的方法 this.onRejectedCallbacks = [] this.resolve = (value) => { if (this.state === 'pending') { this.state = 'fullfiled' this.value = value this.onResolveCallbacks.forEach(fn => fn()) } } this.reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected' this.reason = reason this.onRejectedCallbacks.forEach(fn => fn()) } } try { executor(resolve, reject) } catch (error) { reject(error) } } //then 方法 // x 为then返回的第一值 // 判断x 和 Promise关系的函数resolvePromise then(onFulfilled, onRejected) { // onFulfilled如果不是函数,就忽略onFulfilled,直接返回value onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value; // onRejected如果不是函数,就忽略onRejected,直接扔出错误 onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err }; return new Promise2((resolve, reject) => { if (this.state === 'fullfield') { let x = onFulfilled(this.value) resolvePromise(x, Promise2, resolve, reject) } if (this.state === 'rejected') { let x = onRejected(this.reason) resolvePromise(x, Promise2, resolve, reject) } if (this.state === 'pending') { this.onResolveCallbacks.push(() => { let x = onFulfilled(this.value) resolvePromise(x, Promise2, resolve, reject) }) this.onRejectedCallbacks.push(() => { let x = onRejected(this.reason) resolvePromise(x, Promise2, resolve, reject) }) } }) return Promise2 } } function resolvePromise(x, promise2, resolve, reject) { // 循环引用报错 if (x === promise2) { // reject报错 return reject(new TypeError('Chaining cycle detected for promise')); } // 防止多次调用 let called; // x不是null 且x是对象或者函数 if (x != null && (typeof x === 'object' || typeof x === 'function')) { try { // A+规定,声明then = x的then方法 let then = x.then; // 如果then是函数,就默认是promise了 if (typeof then === 'function') { // 就让then执行 第一个参数是this 后面是成功的回调 和 失败的回调 then.call(x, y => { // 成功和失败只能调用一个 if (called) return; called = true; // resolve的结果依旧是promise 那就继续解析 resolvePromise(promise2, y, resolve, reject); }, err => { // 成功和失败只能调用一个 if (called) return; called = true; reject(err);// 失败了就失败了 }) } else { resolve(x); // 直接成功即可 } } catch (e) { // 也属于失败 if (called) return; called = true; // 取then出错了那就不要在继续执行了 reject(e); } } else { resolve(x); } } //resolve方法 Promise.resolve = function (val) { return new Promise((resolve, reject) => { resolve(val) }); } //reject方法 Promise.reject = function (val) { return new Promise((resolve, reject) => { reject(val) }); } //race方法 Promise.race = function (promises) { return new Promise((resolve, reject) => { for (let i = 0; i < promises.length; i++) { promises[i].then(resolve, reject) }; }) } //all方法(获取所有的promise,都执行then,把结果放到数组,一起返回) Promise.all = function (promises) { let arr = []; let i = 0; function processData(index, data) { arr[index] = data; i++; if (i == promises.length) { resolve(arr); }; }; return new Promise((resolve, reject) => { for (let i = 0; i < promises.length; i++) { promises[i].then(data => { processData(i, data); }, reject); }; }); }

Event Loop : Js 是单线程语言. 有主线程和调用栈. 为了防止阻塞.衍生出eventloop. 队列有宏队列和微队列. 当主线程为空时,调用栈会以先进先出的顺序先把微任务推进微队列执行栈.等到微队列为null时,再把宏任务推进宏队列执行栈,依次循环