ES6 新特性之 Promise 对象

Promise 含义

Promise 是异步编程的一种解决方案,通俗点说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果

从语法上说,Promise 是一个对象,从它可以获取异步操作的消息

基本用法

下面代码创造了一个 Promise 实例

const promise = new Promise(function (resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value)
  } else {
    reject(error)
  }
})

Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject,它们是两个函数,由 JavaScript 引擎提供,不用自己部署,例如

function loadImageAsync (url) {
  return new Promise(function (resolve, reject) {
    const image = new Image()
    image.onload = function () {
      resolve(image)
    }
    image.onerror = function () {
      reject(new Error('Could not load image at ' + url))
    }
    image.src = url
  })
}

上面代码中,使用 Promise 包装了一个图片加载的异步操作,如果加载成功,就调用 resolve 方法,否则就调用 reject 方法

Promise.prototype.then

Promise 实例具有 then 方法,它的作用是为 Promise 实例添加状态改变时的回调函数

then 方法的第一个参数是 resolved 状态的回调函数,第二个参数(可选)是 rejected 状态的回调函数,回调函数的参数传递自上文 resolve 和 reject 方法

loadImageAsync("/post/1.jpg").then(function funcA (data) {
  console.log("resolved: ", data)
}, function funcB (err){
  console.log("rejected: ", err)
})

then 方法返回的是一个新的 Promise 实例,因此可以链式操作

loadImageAsync("/post/1.jpg").then(function funcA (data) {
  return 5
}).then(function funcB (n) {
  return n + 5
}).then(function funcC (m) {
  console.log(m)
})
// 10

上面的代码使用 then 方法,依次指定了三个回调函数,第一个回调函数完成以后,会将返回结果作为参数传入第二个回调函数,同样的,第二个回调函数完成以后,会将返回结果作为参数传入第三个回调函数

Promise.prototype.catch

Promise.prototype.catch 方法是 .then(null, rejection) 或 .then(undefined, rejection) 的别名,用于指定发生错误时的回调函数

new Promise(function (resolve, reject) {
  throw new Error('test')
}).then(function () {
  // do something
}).catch(function (error) {
  console.log(error)
})
// Error: test

上文 resolve 方法的作用等同于抛出错误,所以也可以

new Promise(function (resolve, reject) {
  reject(new Error('test'))
}).then(function () {
  // do something
}).catch(function (error) {
  console.log(error)
})
// Error: test

Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止,也就是说,错误总是会被下一个 catch 语句捕获

loadImageAsync("/post/1.jpg").then(function (data) {
  return data
}).then(function (comments) {
  // some code
}).catch(function (error) {
  // 处理前面三个 Promise 产生的错误
})

一般来说,不要在then方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用 catch 方法,因为末尾的 catch 方法可以捕获前面所有 Promise 产生的错误

catch方法返回的还是一个 Promise 对象,因此后面还可以接着调用then方法

const someAsyncThing = function () {
  return new Promise(function (resolve, reject) {
    // 下面一行会报错,因为 x 没有声明
    resolve(x + 2)
  })
}

someAsyncThing()
.catch(function (error) {
  console.log('oh no', error)
})
.then(function () {
  console.log('carry on')
})
// oh no [ReferenceError: x is not defined]
// carry on

Promise.prototype.finally

finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作,于 ES2018 引入

loadImageAsync("/post/1.jpg")
.then(result => {···})
.catch(error => {···})
.finally(() => {···})

下面是一个例子,服务器使用 Promise 处理请求,然后使用finally方法关掉服务器

server.listen(port).then(function () {
    // ...
})
.finally(server.stop)

Promise.all

Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例

// 生成一个Promise对象的数组
const p1 = new Promise(resolve => resolve())
const p2 = new Promise(resolve => resolve())
const promises = [p1, p2]

const p = Promise.all(promises).then(function (data) {
  // ...
}).catch(function (err){
  // ...
})
  • 只有 p1、p2 的状态都变成 resolved,p 的状态才会变成 resolved,此时 p1、p2 的返回值组成一个数组,传递给 p 的回调函数
  • 只要 p1、p2 之中有一个被 rejected,p 的状态就变成 rejected,此时第一个被 reject 的实例的返回值,会传递给 p 的回调函数

如果作为参数的 Promise 实例,自己定义了 catch 方法,那么它一旦被 rejected,并不会触发 Promise.all 的 catch 方法

const p1 = new Promise((resolve, reject) => {
  resolve('hello')
})
.then(result => result)
.catch(e => e)

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了')
})
.then(result => result)
.catch(e => e)

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e))
// ["hello", Error: 报错了]

Promise.race

Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例

// 生成一个Promise对象的数组
const p1 = new Promise(resolve => resolve())
const p2 = new Promise(resolve => resolve())
const promises = [p1, p2]

const p = Promise.race(promises).then(function (data) {
  // ...
}).catch(function (err){
  // ...
})

上面代码中,只要 p1、p2 之中有一个实例率先改变状态,p 的状态就跟着改变,那个率先改变的 Promise 实例的返回值,就传递给p的回调函数

Promise.resolve

Promise.resolve 方法可以把现有对象转为 Promise 对象,其参数分成四种情况:

参数是一个 Promise 实例

如果参数是 Promise 实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例

参数是一个 thenable对象

Promise.resolve 方法会将这个对象转为 Promise 对象,然后就立即执行 thenable 对象的 then 方法

let thenable = {
  then: function (resolve, reject) {
    resolve(42)
  }
}
let p1 = Promise.resolve(thenable)
p1.then(function (value) {
  console.log(value)  // 42
})
参数不是具有 then 方法的对象,或根本就不是对象

如果参数是一个原始值,或者是一个不具有 then 方法的对象,则 Promise.resolve 方法返回一个新的 Promise 对象,状态为 resolved

const p = Promise.resolve('Hello')
p.then(function (s){
  console.log(s)
})
// Hello
不带有任何参数

如果没有参数,直接返回一个 resolved 状态的 Promise 对象

const p = Promise.resolve()
p.then(function () {
  // ...
})

需要注意的是,立即 resolve 的 Promise 对象,是在本轮“事件循环”(event loop)的结束时执行,而不是在下一轮“事件循环”的开始时

setTimeout(function () {
  console.log('three')
}, 0)

Promise.resolve().then(function () {
  console.log('two')
})

console.log('one')

// one
// two
// three

Promise.reject

Promise.reject 方法也会返回一个新的 Promise 实例,该实例的状态为 rejected

const p = Promise.reject('出错了')
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
})
// 出错了

注意,Promise.reject 方法的参数,会原封不动地作为 reject 的理由,变成后续方法的参数,这一点与 Promise.resolve 方法不一致

const thenable = {
  then(resolve, reject) {
    reject('出错了')
  }
}

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

本文转载自 http://es6.ruanyifeng.com/#docs/promise 并进行整理

除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1045.html
鄂ICP备17018604号-1  鄂公网安备42060702000030号