关于javascript:这是你认识的Promise吗

63次阅读

共计 6320 个字符，预计需要花费 16 分钟才能阅读完成。

本文字数、代码都比拟多，倡议先不看代码，有趣味的时候再认真钻研。

被老学究迫害了十几年的咱们本能的排挤庄重又充斥教育意义的文章。所以总是不想把技术文章写的那么庄重。明天又是一个被有数人写过的课题。（此处略过十万字……）仍然略过作者想说的所有废话，直入主题。

慢着✋，让咱们先来想一想，你心愿能在这个文章中播种什么呢？

1. 你晓得 promise 是什么吗？

依据 百度翻译 介绍，promise 次要有上面几种含意：

咳咳……人不知; 鬼不觉就开错了车，吁~ 及时的刹住。

JavaScript 中的 promise 是用于解决 异步 问题的 工具。没错，它就是一个 工具。跟你做饭用的炒勺和锅铲是同一个定义。

它能够将繁琐的异步问题通过更加易读形式来解决，从而进步代码的可浏览性，缩小保护所带来的老本。

小栗子走一波：

传统调用：

function change1(data) {
  // 解决 data……
  change2(data)
  function change2(data) {
    // 解决 data……
    change3(data)
    function change3(data) {
      // 解决 data……
        change4(data)
        function change4(data) {
        // 解决 data……
            change5(data)
            function change5(data) {
          // 解决 data……
                change6(data)
                function change6(data) {………………}
                }
            }
        }
    }
}

Promise 调用：

Promise.resolve(data)
.then(data => data) // 解决 data
.then(data => data) // 解决 data
.then(data => data) // 解决 data
.then(data => data) // 解决 data
.then(data => data) // 解决 data
.then(data => data) // 解决 data
.then(data => data) // 解决 data
………………

先抛开其余所有的都不说，这一排整整齐齐的代码队伍，看上去就赏心悦目。

接下来，咱们能够更进一步了。

2. 同步和异步

方才咱们提到了，promise 是用来解决 异步 问题的工具。什么是 异步？不是 异步 的问题又是什么？小朋友，你是否有很多问号？？？？？

工作分为 异步 和 同步，不说官网的定义了，通过一段解说来说吧。

2.1 什么是同步

同步：列举一个场景，假如你当初在银行办理业务，如果你后面的那个人办理不完，必定是不能给你办理的。同一时间，业务员只能解决一个业务，当上一个业务达到实现状态（也就是解决完）的时候，能力承受下一个业务。

2.2 什么是异步

异步：同样，列举一个场景，场景变换到饭店，接待你的是一位服务员，服务员点完菜之后就会将菜单交到厨师手里，而后就能够持续接待下一位顾客。并不需要等到以后顾客的服务完结。不须要期待简单的、耗费工夫的炒菜操作的完结。

如许简略的情理，茅塞顿开的感觉有木有……

装 13 的话就不多说了，正经起来~

3. 为什么会呈现 promise

要解释这个问题，得先弄懂什么是回调天堂的问题，回调天堂呈现的起因是因为异步和回调函数。以吃披萨这件事为栗来说，想吃披萨必须得经验以下几步：

想吃披萨 –> 得有披萨店 –> 店里得有厨师 –> 厨师得有食材 –> 菜市场得发售食材 –> 播种制作食材的原材料

其中任何一步有问题，我都不可能吃到披萨。（这里回绝抬杠。怕了怕了）

以代码的模式呈现：

function yuancailiao() {
  // 播种原材料
  function chushou() {
    // 发售食材
    function shicai() {
      // 食材到披萨店里
      function chushi() {
        // 食材到厨师手中
        function dameile() {
          // 披萨店制作披萨
          function chi () {// 历经含辛茹苦，我终于吃到了披萨。}
        }
      }
    }
  }
}

当嵌套的层级太深，就会在查找代码的时候呈现晕眩的感觉，让你呈现晕眩的代码就成为 回调天堂。

Promise.resolve('披萨店')
.then(data => data) // 购买原材料 
.then(data => data) // 制作披萨
.then(data => data) // 上桌
.then(data => data) // 开始大快朵 eat
………………

哇哦~ 空气都变得清爽了。（好像同样的代码我写了两次~~~ 心愿能不被打）

这也就是 promise 呈现的起因。

4.promise 的三种状态

promise 在运行的过程中会呈现三种状态。

  • pending 初始状态 示意待定
  • fulfilled 操作胜利
  • rejected 操作失败

状态只能从 pending 到 fulfilled 或者 rejected。不可逆。

图解：

5. 实现一个简略的 promise

终于到了手撸代码的环节。筹备好了吗？come on baby……

写代码之前咱们先看下 promise 都有哪些须要实现的性能

  • 可应用 new 实例化
  • 接管一个函数作为参数
  • 函数中有 resolve 和 reject 办法
  • 三种状态
  • 可应用 .then 和 .catch 操作
  • 可抛出谬误或执行谬误都可通过 .catch 进行捕捉
  • 链式调用

如同没有其余的了，先写。

第一步：定义构造函数，批改状态

// 先定义一个 Promise 构造函数
function Promise (executor) {
  // 定义一个状态，初始值为 pending
  this.status = 'pending'

  // 胜利办法
  this.success = () => {}

  // 失败办法
  this.error = () => {}

  // 定义 resolve 函数
  function resolve(data) {if (this.status === 'pending') {
      this.status = 'fulfilled'
      // 胜利后执行胜利办法，并将获取的数据过来
      this.success(data)
    }
  }
  // 定义 reject 函数
  function reject (errorMsg) {if (this.status === 'pending') {
      this.status = 'rejected'
      this.error(errorMsg)
    }
  }

  // 将 resolve 和 reject 传入到入参函数中，并 --->  绑定 this！！！executor(resolve.bind(this), reject.bind(this))
}

第二步：定义 then、catch 办法

// 定义 then 办法，接管两个函数作为参数 success = () => {}, error = () => {}
Promise.prototype.then = function (success, error) {
  this.success = success
  this.error = error
}

// 定义 catch 办法
Promise.prototype.catch = function (error) {this.error = error}

好，一个簇新的 Promise 就实现了。自信一试。

new Promise1((res, rej) => {res(1)
}).then((data) => {console.log(data)
})
// 什么也没输入。

纳尼。！跟我的料想齐全不相符啊。机智如我怎么可能被一个小 bug 绊住了双脚。一阵紧锣密鼓的调试，终于让我发现了问题的所在。在 resolve 办法执行的时候，this.success 还未被赋值。改成上面这样就能够失常输入了。

new Promise1((res, rej) => {setTimeout(() => {res(1)
  }, 0)
}).then((data) => {console.log(data)
})

介于上述问题，咱们写出了另一版。请看代码：

// 先定义一个 Promise1 构造函数
  function Promise1 (executor) {
    // 定义一个状态，初始值为 pending
    this.status = 'pending'

    // 胜利办法
    this.successList = []
    //
    // 失败办法
    this.errorList = []

    // 增加 value 缓存 --- 新增加 ---
    this.value = null

    // 定义 resolve 函数
    function resolve(data) {if (this.status === 'pending') {
        this.status = 'fulfilled'
        // 胜利后执行胜利办法，并将获取的数据过来
        // --- 新增加 ---
        this.value = data
        this.successList.forEach(cb => cb(data))
      }
    }
    // 定义 reject 函数
    function reject (errorMsg) {if (this.status === 'pending') {
        this.status = 'rejected'
        // --- 新增加 ---
        this.value = errorMsg
        this.errorList.forEach(cb => cb(errorMsg))
      }
    }

    // 将 resolve 和 reject 传入到入参函数中，并 --->  绑定 this！！！executor(resolve.bind(this), reject.bind(this))
  }
  // 定义 then 办法，接管两个函数作为参数 success = () => {}, error = () => {}
  Promise1.prototype.then = function (success, error) {
    // 如果执行时状态曾经更改，间接拿取缓存的值
    if (this.status === 'fulfilled') {success(this.value)
    }
    if (this.status === 'rejected') {error(this.value)
    }
    // 否则将以后函数保留
    if (this.status === 'pending') {this.successList.push(success)
      this.errorList.push(error)
    }
  }

  // 定义 catch 办法
  Promise1.prototype.catch = function (error) {if (this.status === 'pending') {
      this.error = error
      return
    }
    error(this.value)
  }

  new Promise1((res, rej) => {setTimeout(() => {res(1)
    }, 0)
  }).then((data) => {console.log(data)
  })

原谅我的罪过，让大家一次看这么多代码，实属是我的问题。当前尽量改过。

第三步：谬误捕捉

promise 承受的参数能够显示的抛出谬误，所以咱们须要将谬误捕捉。很简，捕捉到 executor 的谬误就能够

try {
  // 将 resolve 和 reject 传入到入参函数中，并 --->  绑定 this！！！executor(resolve.bind(this), reject.bind(this))
} catch (e) {reject(e)
}

第四步：链式调用

链式调用实现的外围是须要在 then 办法中返回一个新的 promise。这里有一个须要留神的点。resolve 的数据要应用 resolve 函数包裹，reject 的数据要应用 reject 函数包裹。

Promise1.prototype.then = function (success, error) {
  // 如果执行时状态曾经更改，间接拿取缓存的值
  if (this.status === 'fulfilled') {return new Promise1((resolve, reject) => {
      try{resolve(success(this.value))
      }catch(e) {reject(e)
      }
    })
  }
  if (this.status === 'rejected') {return new Promise1((resolve, reject) => {
      try{resolve(error(this.value))
      }catch(e) {reject(e)
      }
    })
  }
  // 否则将以后函数保留
  if (this.status === 'pending') {return new Promise1((resolve, reject) => {this.successList.push(() => {
        try {resolve(success(this.value))
        } catch (e) {reject(e)
        }
      })
      this.errorList.push(() => {
        try {resolve(error(this.value))
        } catch (e) {reject(e)
        }
      })
    })
  }
}

测试一下：

new Promise1((res, rej) => {setTimeout(() => {res(1)
  }, 0)
}).then((data) => {console.log(data)
}).then(() => {console.log(2)
}).then(() => {console.log(3)
})

ok，功败垂成。

6. 实现 promise.all 和 promise.race 办法

6.1 promise.all 办法的实现

promise.all 办法的特点

  • 接管一个数组，数组中的元素为 promise 对象
  • 全副执行实现后，返回失去的后果
  • 只有有一个报错，间接返回错误信息。

栗子实现：

Promise.newAll = arr => {let result = [];
  return new Promise(function (resolve, reject) {
    let count = 0;
    arr.forEach(item => {item.then((res) => { // arr 中为 promise 的列表，所以间接执行 then 办法。result.push(res)
        count ++
                // 如果全副胜利，通过 resolve 返回失去的后果
        if (count === arr.length) {resolve(result)
        }
      }).catch((e) => {
        // 只有有一个报错，就执行 reject
        reject(e)
      })
    })
  })
};

6.2 promise.race 办法

promise.race 办法的特点

  • 接管一个数组，数组中的元素为 promise 对象
  • 返回最快失去的内容
  • 所有内容都失败后执行 reject

栗子实现：

Promise.newRace = arr => {return new Promise(function (resolve, reject) {
    let count = 0;
    arr.forEach(item => {item.then((res) => { // arr 中为 promise 的列表，所以间接执行 then 办法。// 返回最快失去的内容
        resolve(res)
      }).catch((e) => {
        count ++
                // 如果全副失败，通过 resolve 返回失去的后果
        if (count === arr.length) {reject(e)
        }
      })
    })
  })
};

7.async await 简略介绍

人不知; 鬼不觉又写成了老学究，还是太年老。

当初介绍一下下面这两个家伙吧。

async 和 await 是 JavaScript 提供的异步编程的语法糖（能甜死你的那种）。

先看小栗子

function see(){return new Promise((resolve)=>{setTimeout(()=>{resolve(1)
    },3000)
  })
}
async function test(){let result = await see()
  console.log(result)
}
test()

async 会将一个函数标记为异步函数，通过 await 期待后果的返回，并且他们还会扭转事件循环（文章敬请期待）的执行程序。并且。它们还能够应用 try {} catch() {} 捕捉谬误。

又是醉生梦死写的一篇文章。看完文章的你。了解了什么呢？

正文完
javascript
发表至： javascript
2020-12-13
 0
关于javascript:jQuery使用JSONP实现跨域请求
关于javascript:社招中级前端笔试面试题总结
关于route:SAP-Commerce-Cloud-电商云-路由路径的自定义配置与开发
关于javascript:拾遗记3-AsyncAwait执行时机