一、promise:期约

83 阅读4分钟

一、promise:期约

什么是promise

1.ECMAScript 6 新增的引用类型 Promise,可以通过 new 操作符来实例化。创建新期约时需要传入

执行器(executor)函数作为参数:

(1)期约的状态分为三种:

待定(pending)

兑现(fulfilled,有时候也称为“解决”,resolved)

拒绝(rejected)

 let p = new Promise(() => {}); 
 ​
 setTimeout(console.log, 0, p); // Promise <pending> 

其中,控制期约状态的转换是

通过调用它的两个函数参数实现的。这两个函数参数通常都命名为 resolve()和 reject()。调用

resolve()会把状态切换为兑现,调用 reject()会把状态切换为拒绝。另外,调用 reject()也会抛

出错误

 let p1 = new Promise((resolve, reject) => resolve()); 
 setTimeout(console.log, 0, p1); // Promise <resolved> 
 let p2 = new Promise((resolve, reject) => reject()); 
 setTimeout(console.log, 0, p2); // Promise <rejected>
 // Uncaught error (in promise)

注意: 在上面的例子中,并没有什么异步操作,因为在初始化期约时,执行器函数已经改变了每个期约的

状态。执行器函数是同步执行的,Promise创建时,会传给promise一个称为excutor执行器的函数。这个excutor我们可以理解为生产者的生产过程函数。这个函数含有两个参数resolvereject,这俩参数也同样是函数,用来传递异步操作的结果。

 let promise = new Promise((resolve, reject) {
   // executor 
 })
 1.在promise对象创建时,excutor会立即执行。
 2.在resolve和reject是JS引擎自动创建的函数,我们无需自己创建,只需将其作为参数传入就好。
 3.创建的promise的内部状态是个对象,初始时为:

注意,当excutor里面即使调用了多个resolvereject,其最终还是只执行一个,其他的都被忽略掉

 let promise = new Promise(function(resolve, reject) {
   resolve("ok");
 ​
   reject(new Error('error')); // ignored
   setTimeout(() => resolve('okDelay')); // ignored
 });
 ​

Promise.resolve方法:

1.Promise.resolve:此方法属于Promise的静态方法

基本使用:

(1).Promise.resolve()中传入一个promise,则它的状态由传入的promise决定:如p2,p3,返回的值也由传入的promise中是否传入值决定。

(2) Promise.resolve()中如果没有闯入参数,则返回的promise的值为undefined,如果传入值,则返回的值为传入的值。

(3)注意:使用new Promise()创建实例时候,没有传入值,也是为undefined

 let p = Promise.resolve() //返回一个成功状态的promise,PromiseResult为undefined
 let p1 = Promise.resolve(3) // 返回一个成功状态的promise, PromiseResult为3
 let p2 = Promise.resolve(Promise.reject('error')) // 返回一个失败状态的promise, PromiseResult为'error'
 let p3 = Promise.resolve(new Promise((resolve,reject) => {resolve()})) //返回一个成功状态的promise,PromiseResult为undefined

Promise.reject方法

1. Promise.reject():此方法属于Promise的静态方法

基本使用:

(1) Promise.reject(reason):如果不传入参数,则会返回一个失败状态的promise,PromiseResult为undefined,如p1,p2所示

(2)如果传入的是一个成功的promise,返回的还是一个失败的promise,因为promise的状态不能再次改变

 let p = Promise.reject() //返回一个失败状态的promise,PromiseResult为undefined
 let p1 = Promise.reject('error') // 返回一个失败状态的promise,PromiseResult为error
 let p2 = Promise.reject(Promise.reject('error')) // 返回一个失败状态的promise, PromiseResult为'error'
 let p3 = Promise.reject(new Promise((resolve,reject) => {resolve()})) //返回一个失败状态的promise,

Promise.all方法

1.Promise.all():此方法属于Promise的静态方法

(1) Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。在all方法中可以传递多个Promise对象,当所有的Promise对象状态都返回fufilled,才会返回fulfilled,否则返回rejected。

 let p1 = new Promise((resolve, reject) => {
             // setTimeout(() => {
             //     resolve('p1ok')
             // }, 1000)
             resolve('p1ok')
             console.log(111)
         })
         let p2 = Promise.resolve('p2ok')
         let p3 = Promise.resolve('p3ok')
             // then里面的回调函数是异步执行的
         p1.then(v => {
             console.log(222)
         })
         console.log(333)
             // 调用all方法 
         let result = Promise.all([p1, p2, p3])
         console.log(result) // 一个新的promise,PromiseResult为['p1ok', 'p2ok', 'p3ok']
 ​

Promise.race方法

1.Promise.race():此方法属于Promise的静态方法

(1) Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。可以传递多个Promise对象作为参数,如果实例中有一个实例率先改变状态,那么race的状态就会跟着改变。

 let p1 = new Promise((resolve, reject) => {
             // setTimeout(() => {
             //     resolve('p1ok')
             // }, 1000)
             resolve('p1ok')
             console.log(111)
         })
         let p2 = Promise.resolve('p2ok')
         let p3 = Promise.resolve('p3ok')
             // then里面的回调函数是异步执行的
         p1.then(v => {
             console.log(222)
         })
         console.log(333)
             // 调用all方法 
 let result2 = Promise.race([p1, p2, p3])
         console.log(result2) //  返回一个成功的promise,PromiseResult为"p1ok"

Promise.prototype.then方法

1.promise.then():此方法属于promise实例方法then方法是定义在原型对象Promise.prototype上

(1) promise.then(value, reason)接受两个参数,均为回调方法,对应promise的成功,失败方法。第一个回调函数是状态改变fufilled时调用的,第二个回调函数(可选)是状态改变rejected时调用的。

注意:then方法里面的回调是异步操作的,且then方法返回的是一个新的promise

// 实例化对象

        let p = new Promise((resolve, reject) => {
            // 此处使用settimeout来实现异步操作
            setTimeout(() => {
                resolve('ok')
            }, 2000)
        })
        const res = p.then(value => {
            console.log(value)
            return 'settimeoutp1'
        }, reject => {
            console.warn(reject)
        })
        res.then().then(value => {
                console.log(111)
                return value
            }).then(value => {
                console.log(value)  // 此处打印出来的是settimeoutp1,接受的值传递下来
            })
            // 多个回调
       
        console.log(res)
        console.log(p)