C.Promise 对象

[Akiq2016]

callback(回调)用来干嘛？callback就是：当你做完这件事情，要回来执行这一块代码(callback)。是一种对未来事情的规划。而promise功能上所解决的问题跟callback一样，那用promise究竟有什么好处？举个例子。

以下代码，看起来没什么区别。

// callback pattern
import loadImageCallback from './load-image-callback'

loadImageCallback('images/cat1.jpg', img => document.body.appendChild(img))

// promise pattern
import loadImagePromise from './load-image-promise'

loadImagePromise('images/cat1.jpg').then(img => document.body.appendChild(img))

我们试试加载更多图片。尽管只是三层嵌套，但是我已经读不下去了。而这里只是操作了3张图片。

import loadImageCallback from './load-image-callback'
let addImg = img => document.body.appendChild(img)

loadImageCallback('images/cat1.jpg', (err, img1) => {
  if(err) throw err
  addImg(img1)
  loadImageCallback('images/cat2.jpg', (err, img2) => {
    if(err) throw err
    addImg(img2)
    loadImageCallback('images/cat3.jpg', (err, img3) => {
      if(err) throw err
      addImg(img3)
    })
  })
})

使用promise，首先介绍一种效率不是特别高的，重复使用多个then来实现顺序进行处理的解决方案。

import loadImagePromise from './load-image-promise'
let addImg = img => document.body.appendChild(img)

Promise
  .resolve()
  .then(() => loadImagePromise('images/cat1.gif')).then(addImg)
  .then(() => loadImagePromise('images/cat2.gif')).then(addImg)
  .then(() => loadImagePromise('images/cat3.gif')).then(addImg)
  .catch(err => console.log(err))

又比如写成这样子

import loadImagePromise from './load-image-promise'
let addImg = img => document.body.appendChild(img)

let tasks = [
  () => loadImagePromise('images/cat1.gif'),
  () => loadImagePromise('images/cat2.gif'),
  () => loadImagePromise('images/cat3.gif')
]
// 如果改成普通的for循环，那么达到的是并行效果。可以看测试代码(https://github.com/Akiq2016/asyn-programming-with-JavaScript/blob/master/C-promise/src/app-test-parallel.js)
tasks.reduce((promise, item) => {
  return promise.then(item).then(addImg)
}, Promise.resolve())

上面的写法是顺序执行，而下面的这个promise.all是实现的多个promise对象同时开始执行的。

import loadImagePromise from './load-image-promise'
let addImg = img => document.body.appendChild(img)

Promise
  .all([
    loadImagePromise('images/cat1.jpg'),
    loadImagePromise('images/cat2.jpg'),
    loadImagePromise('images/cat3.jpg')
  ])
  .then(imgs => imgs.forEach(addImg))
  .catch(err => console.log(err))

完整代码：
C-promise

学习链接：
Promises - Part 8 of Functional Programming in JavaScript
JavaScript Promise迷你书

其他推荐：
剖析Promise内部结构，一步一步实现一个完整的、能通过所有Test case的Promise类

下一篇

D.Promise + Generator