Promise&async await

Promise： ES6 新增的语法，是异步问题同步化解决方案，同时解决了回调地狱的问题;
Promise解决：
通过.then的方式，拿到Promise内部的异步操作的结果,并且不阻塞和Promise不相关的任何程序，让它们同步执行;
then 函数会返回一个 Promise 实例，并且该返回值是一个新的实例而不是之前的实例。因为 Promise 规范规定除了 pending 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 then 调用就失去意义了。对于 then 来说，本质上可以把它看成是 flatMap；
Promise的状态(生命周期)：
padding：进行中
fulfilled：已完成
rejected：已失败
异步任务的完成与否取决于当前 Promise的状态
1.异步任务完成调用resolve()成功回调状态：padding -> fulfilled
2.异步任务失败调用reject()失败回调状态：padding -> rejected
Promise的特点：
1.Promise的状态不受外界的影响;
因为Promise代表的是异步操作，只有异步操作成功或者或者失败，才会改变* Promise的状态;
2.Promise的状态一旦改变就无法更改;
一旦状态固化，返回的结果在任何地方都调用的到;
Promise的执行方式：
微任务的方式执行Promise注册上回调函数，不管是成功还是失败都可以;
微任务：相当于高速中的紧急车道，可以让微任务快速排在异步队列的最前方，等待主线程通过事件轮询将其调用;
Promise的静态方法：(静态方法是在构造器中绑定的方法)
Promise.resolve():返回一个成功状态态的Promise，通过.then()注册成功的回调函数;
Promse.reject():返回一个失败状态的Promise，通过.catch()注册失败的回调函数;
Promise.all([p1,p2,p3]):只有当中的Promise对象全部成功，才会返回一个结果且是个数组;
Promise.race([p1,p2,p3]):返回其中一个运行最快的结果;

let p = new Promise((resolve,reject) => { //Promise中的回调函数是：执行器函数(executon)===同步执行
          console.log('我是Promise的同步回调函数');

          //异步任务
          $.ajax({ 
            url:'./data.json',
            success:function (data) {
              // console.log(data)
              resolve(data)
             
            },
            error:function (err) {
              reject(err)
            }
          })

        p.then((res) => { //.then方式注册的是 成功的回调函数
          // console.log(res)
          // simpleArray(res)
          console.log( simpleArray(res))
        }).catch((err) => { //.catch方式注册的是 失败的回调函数
          console.log(err,'失败')
        })

        console.log('我是同步代码')

        function simpleArray (data) {
          return data.map(function (item) {
            // console.log(item)
            return item.name
          })
        }
// 我是Promise的同步回调函数
// 我是同步代码
// ["zhangsan", "lisi", "wangwu"]

面试考点：theable 对象
1.Promise调用resolve方法传入theable对象会发生什么？
会调用theable对象中的 then方法，然后调用resolve()传出成功结果，或者调用reject()传出失败结果;
2.Promise调用reject方法传入theable对象会发生什么？
Promise只有调用resolve方法传入theable对象才会返回成功或失败的结果，
调用reject()只会返回一个空对象{then:f}

        //theable 对象
        let obj = {
          then(resolve,reject){
            // resolve(11);
            reject(12);
          }
        }

        let p1 = Promise.resolve(obj);
        // let p1 = Promise.reject(obj);//{then:f}

        p1.then((data) => {
          console.log(data)
        }).catch((err) => {
          console.log(err)
        })

案例

        //考察：异步队列 事件轮询 微任务
        Promise.resolve().then(function(){
          console.log('Promise1') //1
          setTimeout(() => {
            console.log('setTimeOut1') //4
          },0)
        })

        setTimeout(() => {
          console.log('setTimeOut2') //2
          Promise.resolve().then(function(){
            console.log('Promise2') //3
          })
        },0)
//Promise1
//setTimeOut2
//Promise2
//setTimeOut1

首先看出来，Promise是通过构造函数实例化一个对象，然后通过实例对象上的then方法，来处理异步返回的结果。

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

function Promise(executor) {
    var _this = this
    this.state = PENDING; //状态
    this.value = undefined; //成功结果
    this.reason = undefined; //失败原因
    function resolve(value) {}
    function reject(reason) {}
}

Promise.prototype.then = function (onFulfilled, onRejected) {
};

module.exports = Promise;

当我们实例化Promise时，构造函数会马上调用传入的执行函数executor，我们可以试一下：

let p = new Promise((resolve, reject) => {
    console.log('执行了');
});

因此在Promise中构造函数立马执行，同时将resolve函数和reject函数作为参数传入：

function Promise(executor) {
    var _this = this
    this.state = PENDING; //状态
    this.value = undefined; //成功结果
    this.reason = undefined; //失败原因
    function resolve(value) {}
    function reject(reason) {}
    executor(resolve, reject)
}

但是executor也会可能存在异常，因此通过try/catch来捕获一下异常情况：

try {
    executor(resolve, reject);
} catch (e) {
    reject(e);
}

手写Promise

function Mypromise(fn) { //构造函数
      this.state = 'pending' //状态
      this.value = undefined //成功结果
      this.reason = undefined //失败原因
      /*
      那么如何让我们的Promise来支持异步呢？
      我们可以参考发布订阅模式，在执行then方法的时候，如果当前还是PENDING状态，
      就把回调函数寄存到一个数组中，当状态发生改变时，去数组中取出回调函数;
      */
      this.onFulfilled = [];//成功的回调
      this.onRejected = []; //失败的回调

      let resolve = value => {
        if (this.state === 'pending') {
          this.state = 'fulfilled'
          this.value = value
          this.onFulfilled.forEach(fn => fn(value))
          // console.log(this.value)
        }
      }
      let reject = value => {
        if (this.state === 'pending') {
          this.state = 'rejected'
          this.reason = value
          this.onRejected.forEach(fn => fn(value))
          console.log(this.reason)
        }
      }
      // 自动执行函数 
      try {
        fn(resolve, reject)
      } catch (e) {
        reject(e)
      }
      // then 

    }
     /*
      在规范中说明了，onFulfilled和onRejected是可选的，因此我们对两个值进行一下类型的判断：
      onFulfilled 和 onRejected 都是可选参数。
      如果 onFulfilled 不是函数，其必须被忽略。
      如果 onRejected 不是函数，其必须被忽略。
     */
    Mypromise.prototype.then = function (onFulfilled, onRejected) {
      if (this.state === 'fulfilled') {
        typeof onFulfilled === 'function' && onFulfilled(this.value)
      }
      if (this.state === 'rejected') {
        typeof onRejected === 'function' && onRejected(this.reason)
      }
      if (this.state === 'pending') {
        typeof onFulfilled === 'function' && this.onFulfilled.push(onFulfilled)
        typeof onRejected === 'function' && this.onRejected.push(onRejected)
      }
    }
  
    //Promise：异步问题同步化解决方案
    let p = new Mypromise((resolve, reject) => { //Promise中的回调函数是：执行器函数(executon)===同步执行
      console.log('我是Promise的同步回调函数');

      //异步任务
      $.ajax({
        url: './data.json',
        success: function (data) {
          console.log(data)
          resolve(data)

        },
        error: function (err) {
          reject(err)
        }
      })
    })

  p.then((res) => { //.then方式注册的是 成功的回调函数
      console.log(res)
      // simpleArray(res)
      console.log(simpleArray(res))
    })

   function simpleArray(data) {
      return data.map(function (item) {
        // console.log(item)
        return item.name
      })
    }
// 我是Promise的同步回调函数
// 我是同步代码
// ["zhangsan", "lisi", "wangwu"]

手写Promise参考原文：
从零开始手写Promise
实践系列-Promises/A+规范

手写Promise（用Class类）

 class myPromise {
      constructor(fn) {
        this.state = 'pending' //状态
        this.value = undefined //成功结果
        this.reason = undefined //失败原因

        this.onFulfilled = [];//成功的回调
        this.onRejected = []; //失败的回调
        let resolve = value => {
          if (this.state === 'pending') {
            this.state = 'fulfilled'
            this.value = value
            this.onFulfilled.forEach(fn => fn(value))
            // console.log(this.value)
          }
        }
        let reject = value => {
          if (this.state === 'pending') {
            this.state = 'rejected'
            this.reason = value
            this.onRejected.forEach(fn => fn(value))
            console.log(this.reason)
          }
        }

        // 自动执行函数 
        try {
          fn(resolve, reject)
        } catch (e) {
          reject(e)
        }
      }

      // then 
      then(onFulfilled, onRejected) {
        if (this.state === 'fulfilled') {
          typeof onFulfilled === 'function' && onFulfilled(this.value)
        }
        if (this.state === 'rejected') {
          typeof onRejected === 'function' && onRejected(this.reason)
        }
        if (this.state === 'pending') {
          typeof onFulfilled === 'function' && this.onFulfilled.push(onFulfilled)
          typeof onRejected === 'function' && this.onRejected.push(onRejected)
        }
      }

    }

 //Promise：异步问题同步化解决方案
    let p = new myPromise((resolve, reject) => { //Promise中的回调函数是：执行器函数(executon)===同步执行
      console.log('我是Promise的同步回调函数');

      //异步任务
      $.ajax({
        url: './data.json',
        success: function (data) {
          console.log(data)
          resolve(data)

        },
        error: function (err) {
          reject(err)
        }
      })
    })

    p.then((res) => { //.then方式注册的是 成功的回调函数
      console.log(res)
      // simpleArray(res)
      console.log(simpleArray(res))
    })

   function simpleArray(data) {
      return data.map(function (item) {
        // console.log(item)
        return item.name
      })
    }
// 我是Promise的同步回调函数
// 我是同步代码
// ["zhangsan", "lisi", "wangwu"]

async & await：
原理：async 和 await 用了同步的方式去做异步，async 定义的函数的返回值都是 promise，await后面的函数会先执行一遍，然后就会跳出整个 async 函数来执行后面js栈的代码;
主要考察宏任务和微任务，搭配promise，询问一些输出的顺序;

最后编辑于：2021.03.27 15:29:11

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,884评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,347评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,435评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,509评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,611评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,837评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,987评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,730评论 0赞 267
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,194评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,525评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,664评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,334评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,944评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,764评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,997评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,389评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,554评论 2赞 349

Promise&async await

推荐阅读更多精彩内容