JS promise妙用

199 阅读2分钟

1.Promise简介

Promise 对象代表一个异步操作,有三种状态:pending,fulfilled,rejected,他有个特点,一旦状态改变,就不会再变,任何时候都得到的是这个结果,romise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。

2.Promise的特点

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数,Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

3.创建Promise

如下,可以创建一个promise

let promise = new Promise((resolve,reject) => {})

如下的两种方式调用

promise.then(onFulfilled,onRejected)
promise.then(onFulfilled).catch(onRejected)

4.Promise妙用

先上代码

async function test(num){
    try{
        await myPromise(num)
        console.log(num)
    }catch(e){
        console.log('出错了')
    }
}
function myPromise(num){
    return new Promise((resolve,reject) => {
        if(num < 0){
            resolve()
        }else if(num < 2){
            reject()
        }
    })
}
test(-1)
test(1)
test(3)

大家可以猜下执行的结果,这里其实想说的是promise 结合 async await 的阻断作用,在执行myPromise函数的时候,由于使用await,会使得函数执行暂停,只有当promise的进程结束的时候,不管是resolve还是reject,test函数才会继续执行下去。所以第一个函数执行的结果是打印-1,第二个是打印‘出错了’,第三个函数什么都不会打印,因为此时的promise并未结束。

再看第二种情况:

var p1 = new Promise(function(resolve, reject){
  // ... some code
});
 
var p2 = new Promise(function(resolve, reject){
  // ... some code
  resolve(p1);
})

上面代码中,p1 和 p2 都是 Promise 的实例,但是 p2 的 resolve 方法将 p1 作为参数,这时 p1 的状态就会传递给 p2。如果调用的时候,p1 的状态是 pending,那么 p2 的回调函数就会等待 p1 的状态改变;如果 p1 的状态已经是 fulfilled 或者 rejected,那么 p2 的回调函数将会立刻执行,这也间接起到了一个阻断的作用。