一些关于Javascript Promise的了解

2017-08-01  本文已影响0人  滑天下之大稽

Promise 对象是 ES6 的语法,在Javascript中用来进行一个异步操作的最终完成(或失败)及其结果值的显示。

new Promise(
    /* executor */
    function (resolve, reject) {...}
)

定义的Promise对象中方法参数 resolve,reject 将会是第一个.then(resolve, reject).catch(reject)的参数将会执行的地方。可以将 Promise 复制到一个普通的变量,以便后续的操作。

Promise 对象有以下几种状态:

1. pending:   初始状。
2. fulfilled: 意味着操作成功完成。
3. rejected:  意味着操作失败

new Promise 的快捷方式

new Promise(resolve => {resolve(42)})

这段代码等同于:

Promise.resolve(42).then(val => {console.log(val)})

thenable 对象

具有 .length 方法的非数组对象成为 Array like 对象,thenable 指的是一个具有 .then 方法的对象。

可以将 thenable 对象转换 promise 对象:

var promise = Promise.resolve($.ajax('/json/comment.json'));// => promise对象
promise.then(function(value){
    console.log(value);
});

Promise.resolve 只使用了共通的方法 then

同步调用和异步调用同时存在导致的混乱

Vue 中经常用到的有关Promise对象

  1. vuex 中调用的this.$store.dispatch('xxx')的返回结果是一个promise对象,所以需要有先后语境的时候可以写成
this.$store.dispatch('xxx').then(() => {/* code here */})

操作完 vuex 后才执行then中的方法或者操作。

  1. 基于promise 的 axios 插件是操作http 请求的插件,很方便整合到vue项目中使用,很容易了解它返回的数据也是promise 对象,也可利用这一点进行其他的异步操作。

promise 中的数据链式传递

promise 对象的 thencatch方法都会返回一个新的promise 对象,形成链式操作。
如果需要传递数据可以在返回值,以便后者使用,如下:

axios.post(xxx).then(data => {
  return handle(data)
}).then(data2 => {
  /* more code here */
})

data2 便是 上一次return之后的值


white_bear.jpg
上一篇下一篇

猜你喜欢

热点阅读