vlambda博客
学习文章列表

new Promise((resolve,reject)=>{ console.log(1); resolve();}).then(()=>{ console.log(2);})console.log(3);

async function async1() {console.log(1);await 10;console.log(2);}fn();console.log(3);

setTimeout(()=>{ console.log(1);},50)setTimeout(()=>{ console.log(2);},0)console.time('for takes time:');for(let i=0;i<1000000;i++){}console.timeEnd('for takes time:');setTimeout(()=>{ console.log(3);},20)console.log(4); 

async function async1(){ console.log('async1 start'); await async2(); console.log('async1 end');}async function async2(){ console.log('async2');}console.log('script start');setTimeout(function(){ console.log('setTimeout');})async1();new Promise(function(resolve){ console.log('promise1'); resolve();}).then(function(){ console.log('promise2');})console.log('script end');

'script start' 'async1 start' 'async2' 'promise1'    'script end'  'setTimeout'  'async1 end'   'promise2'   

script(整体代码)setTimeoutsetIntervalI/OUI交互事件postMessageMessageChannelsetImmediate(Node.js 环境)

Promise.then/catch/finaly, async/await(本质是对Promise 的一些封装)Object.observeMutaionObserverprocess.nextTick(Node.js 环境)

//获取系统_self.ajaxFn({ url:url1, success:(res)=>{ //获取表单分类 _self.ajaxFn({ url:url2, success:(res)=>{ //获取表单 _self.ajaxFn({ url:url3, success:(res)=>{ //处理业务 } }) } }) }})

new Promise((resolve,reject)=>{ //获取系统 _self.ajaxFn({ url:url1, success:(res)=>{ resolve(res); } })}).then( value=>{ return new Promise((resolve,reject)=>{ //获取表单分类 _self.ajaxFn({ url:url2, success:(res)=>{ resolve(res); } }) }) }).then( value=>{ //获取表单 _self.ajaxFn({ url:url1, success:(res)=>{ //处理逻辑 } }) })

(function(){ /* 构造函数 excutor:执行器（同步执行） */ function Promise(excutor){} /* Promise 原型对象的then() 指定成功和失败的回调函数 因为可链式调用，所以要返回一个promise对象 */ Promise.prototype.then=function(onResolved,onRejected){ } /* Promise 原型对象的catch() 指定失败的回调函数 返回一个promise对象 */ Promise.prototype.catch=function(onRejected){ } /* 只实现Promise关键 的构造方法以及catch/then方法，其它的方法大家可自行发挥啦 */  window.Promise=Promise;})(window)

const nextTick = (function () { var callbacks = []; var pending = false; var timerFunc; function nextTickHandler () { pending = false; var copies = callbacks.slice(0); callbacks = []; for (var i = 0; i < copies.length; i++) { copies[i]() } } //istanbul ignore if   if (typeof MutationObserver != 'undefined') { // 首选 MutationObserver  var counter = 1 var observer = new MutationObserver(nextTickHandler) // 声明 MO 和回调函数 var textNode = document.createTextNode(counter) observer.observe(textNode, { // 监听 textNode 这个文本节点 characterData: true // 一旦文本改变则触发回调函数 nextTickHandler }) timerFunc = function () { counter = (counter + 1) % 2 // 每次执行 timeFunc 都会让文本在 1 和 0 间切换 textNode.data = counter } } else { timerFunc = setTimeout // 如果不支持 MutationObserver, 退选 setTimeout } return function (cb, ctx) { var func = ctx ? function () { cb.call(ctx) } : cb callbacks.push(func) if (pending) return pending = true timerFunc(nextTickHandler, 0) }})()

/* 构造函数 excutor:执行器*/function Promise(excutor){ const _self=this; _self.status='pending';//promise对象指定的status属性，初始值为pending; _self.data=undefined;//promise对象指定一个用于存储结果数据的属性； _self.callbacks=[];//失败或成功的回调函数数组，每个元素的结构：{onResolved(){},onRejected(){}} function resolve(value){  if(_self.status!='pending'){ return; } _self.status='resolved'; //将状态改为resolved _self.data=value; // 保存value //如果有待将执行的回调函数，就立即异步执行回调函数 onResolved nextTick(()=>{ _self.callbacks.forEach((callbacksObj)=>{ callbacksObj.onResolved(value); }) }) } function reject(reason){ if(_self.status!='pending'){ return; } _self.status='rejected'; //将状态改为rejected _self.data=reason; // 保存value //如果有待将执行的回调函数，就立即异步执行回调函数 onRejected nextTick(()=>{ _self.callbacks.forEach((callbacksObj)=>{ callbacksObj.onRejected(reason); }) }) } //立即执行执行器 try{ excutor(resolve,reject); } catch(error){ reject(error); } }

/* Promise 原型对象的then()方法 指定成功和失败的回调函数 因为可链式调用，所以必须要要返回一个promise对象 返回的promise 的结果是由onResolved/onRejected执行的结果决定的*/Promise.prototype.then=function(onResolved,onRejected){ var _self=this; //指定回调函数的默认值,如果参数不是函数就指定个默认方法 onResolved=typeof onResolved==='function'? onResolved :value => value; onRejected=typeof onRejected==='function'? onRejected :reason => {throw reason};
 return new Promise((resolve,reject)=>{ /* 执行指定callback(onResolved/onRejected)的回调函数 根据执行的结果改变return的pormise的状态 */ function handle(callback){  try{ const result=callback(_self.data);  if(result instanceof Promise){ //返回的是promise,返回promise的结果就是这个结果 result.then(resolve,reject) }else{//返回的不是promise,返回的promise为成功，value就是返回值 resolve(result)  } }catch(error){ //抛出异常，返回promise的结果为失败，reason为异常 reject(error) } } if(_self.status==='resolved'){ //当前promise的状态是resolved //异步执行成功的回调 nextTick(()=>{ handle(onResolved) }) }else if(_self.status==='rejected'){//当前promise的状态是rejected //异步执行失败的回调 nextTick(()=>{ handle(onRejected) }) }else{ //当前promise 的状态是pending //将成功和失败的回调函数保存到callback中去存起来 _self.callbacks.push({ onResolved(){ handle(onResolved); }, onRejected(){ handle(onRejected); } }) } })

/* Promise 原型对象的catch() 指定失败的回调函数 返回一个promise对象*/Promise.prototype.catch=function(onRejected){ return this.then(null,onRejected)}