【javascript笔记】Promise对象

素颜马尾好姑娘i 2022-07-11 09:27 257阅读 0赞

最初的异步流程控制，是通过回调来实现，但是存在回调太多层就会让人崩溃

后来出现了，异步解决方案 async 可以应用到NodeJS 和 browser里面。

后来ES6 将 promise 引入标准, 它是用于异步计算，按照MDN的解释，一个异步对象就是一个值，这个值可以在现在 或者 未来 可用， 或者永远不可以用。\[来自MDN\]， 反正就是用来处理异步操作的一个东西。

新建一个Promise对象

var p = new Promise(function(resolve, reject){ 
        var response = getDataFromServer()
        if(response.status == 200) { 
            resolve(response.data) 
        }
        else { 
            reject(new Error('请求失败'))
        }
        console.log('初始化p对象，这句话会被打印出来')
    })
    //构造函数接受一个函数作为参数,请注意 这个函数 在构造Promise对象也就是初始化这个p 对象的时候 就会执行
    
    //resolve 和reject 同样是函数参数

Promise对象有三个状态

`pending` 对象初始化之后的初始化状态 既不是 fulfilled 也不是 rejected.

`fullfilled`

`rejected`

来看Promise对象实例方法, `then` 和 `catch`

[`then`][then]方法有两个参数，同样的是函数，分别是Promise对象成功和失败执行的函数，`then(function(){}, function(){} )`

[`catch`][catch]方法只有一个参数，参数是函数，catch() 方法只处理 Promise 失败时的情况。promise对象调用catch(function()\{ \}) 实际上等同于调用 then(undefined, function()\{\})

Promise有几个个静态方法

**1**， [Promise.reject()][Promise.reject] 按照MDN的解释是这样的： Promise.reject(reason)方法返回一个用reason拒绝的Promise。你可以这样理解，返回的这个promise对象在初始化的时候，什么都没有做，直接给reject(‘your reject reson’)

举个栗子：

var rejectPromiseObj_1 = Promise.reject("Testing static reject");
    
    var rejectPromiseObj_2 = new Promise(function(resolve, reject) { 
        reject('Testing static reject')
    })
    
    //实际上 rejectPromiseObj_1 和 rejectPromise_2是等价的

![这里写图片描述][SouthEast]

**2**， [Promise.resolve()][Promise.resolve]

Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。但如果这个值是个thenable（即带有then方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态（指resolved/rejected/pending/settled）；否则以该值为成功状态返回promise对象。

可能有三种情况：

1，Promise.resolve(promise);
    2，Promise.resolve(thenable);
    3，Promise.resolve(value);
    //这个value值有点特殊，如果是value是一个Error对象返回的仍然是一个立即可以resolve(value)的promise对象。 也就是说我们这样：
    
    var promise = Promise.resolve(new Error('errorObj'))
    //实际上promise 就等价于 这样：
    var promise = new Promise(function(resolve,reject){ 
        resolve(new Error('errorObj'))
    })
    promise.then(value=>{
        //会被调用，并且value的值 上面的Error对象
    }).catch(err=>{
        //不会被调用
    })

**3**，[Promise.all()][Promise.all] 这个静态方法的参数是一个可迭代的对象,这个对象的item应该都是promise对象，若不是的话，就会先调用上面的Promise.resolve(item)方法转换成新的promise对象。 Promise.all()方法返回的也是一个promise对象。 直接看mdn的代码:

var p1 = Promise.resolve(3);
    var p2 = 1337;
    var p3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, "foo"); }); Promise.all([p1, p2, p3]).then(values => { console.log(values); // [3, 1337, "foo"] });

上面的例子，参数是一个数组，数组的值分别是 一个promise对象， 一个值， 一个promise对象，这三个参数都能够成功的被resolved，所以最后成功的打印了 数组的值， 我们改动一下这个代码：

这个类似于 async 中的 `parallel`方法，多个任务必须每一个成功回调，err才会为空，然后执行业务逻辑， 若是任一一个抛出err则 整个回调的err会出现，执行业务逻辑中断。

而all方法要求的是每一个Promise对象能够成功的被fullfilled的，则才会进入then(()=>\{\})方法。

写的很乱，而且有表述不清楚的地方，请见谅

参考资料:  
[https://www.promisejs.org/][https_www.promisejs.org]  
[http://es6.ruanyifeng.com/\#docs/promise][http_es6.ruanyifeng.com_docs_promise]  
[https://www.sitepoint.com/six-things-might-know-promises/][https_www.sitepoint.com_six-things-might-know-promises]

[then]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
[catch]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
[Promise.reject]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject
[SouthEast]: /images/20220711/c3291efabeac42ff92179d6e451a369e.png
[Promise.resolve]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve#Resolve另一个promise对象
[Promise.all]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
[https_www.promisejs.org]: https://www.promisejs.org/
[http_es6.ruanyifeng.com_docs_promise]: http://es6.ruanyifeng.com/#docs/promise
[https_www.sitepoint.com_six-things-might-know-promises]: https://www.sitepoint.com/six-things-might-know-promises/