一些关于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
同步调用和异步调用同时存在导致的混乱
- 绝对不能对异步回调函数(即使在数据已经就绪)进行同步调用。
- 如果对异步回调函数进行同步调用的话,处理顺序可能会与预期不符,可能带来意料之外的后果。
- 对异步回调函数进行同步调用,还可能导致栈溢出或异常处理错乱等问题。
- 如果想在将来某时刻调用异步回调函数的话,可以使用 setTimeout 等异步API。
Vue 中经常用到的有关Promise对象
- vuex 中调用的
this.$store.dispatch('xxx')
的返回结果是一个promise对象,所以需要有先后语境的时候可以写成
this.$store.dispatch('xxx').then(() => {/* code here */})
操作完 vuex 后才执行then中的方法或者操作。
- 基于promise 的 axios 插件是操作http 请求的插件,很方便整合到vue项目中使用,很容易了解它返回的数据也是promise 对象,也可利用这一点进行其他的异步操作。
promise 中的数据链式传递
promise 对象的 then
和catch
方法都会返回一个新的promise 对象,形成链式操作。
如果需要传递数据可以在返回值,以便后者使用,如下:
axios.post(xxx).then(data => {
return handle(data)
}).then(data2 => {
/* more code here */
})
data2
便是 上一次return
之后的值
white_bear.jpg