前端异步编程的那些事

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)}