promise

weixin_48819493

已于 2023-02-28 10:43:51 修改

阅读量5.2k

点赞数 2

分类专栏： JavaScript 文章标签：前端 javascript java

于 2022-11-03 10:53:45 首次发布

本文链接：https://blog.csdn.net/weixin_48819493/article/details/123774376

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、promise 的介绍

1.实例对象中的属性：

new promise()或者Promise.resolve等都会返回一个promise实例对象。

promise需要有值来表示当前的状态，后续then中的需要根据状态来决定执行哪个函数

pending表示未决定，初始状态，可以转变为成功或失败，但只能转一次。

resolve() 方法：调用resolve方法，状态将由pending 变为 fullfilled，表示成功，并且可以设置返回值如，resolve(123)

reject()或者throw：调用reject方法，状态将由pending 变为 rejected，表示失败，并且可以设置返回值如，reject(123)

状态成功就执行后续then里面的第一个函数，失败就执行第二个函数，并且在函数中接收resolve或者reject返回的值。

2.promise对象的值：

1.promise实例对象中的PromiseResult属性保存着任务成功或失败的结果。

2.promise实例对象中的PromiseState保存着状态，成功或失败，即fulfilled或rejected

3.改变promise状态和指定回调函数谁先谁后？

（1）都有可能，正常情况下是先指定回调再改变状态，但也可以先改状态在指定回调。

（2）如何先改状态再指定回调：

在执行器函数中直接调用resolve()/reject()

延迟更长时间才调用

（3）什么时候得到数据

如果执行器函数中是异步任务，那么先调用then()，等异步任务执行完状态改变时，回调函数就会调用得到数据。

如果执行器函数中是同步任务，那么同步函数执行完改变状态后回调函数再，得到数据

4.promise如何串联多个任务

promise的每一个then()都返回一个新的promise，可以开成then()的链式调用

通过then的链式调用串联多个同步/异步任务

5.关于then方法的几个问题

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

这里的输出结果是 
1111
2222
3333
An error
因为then里面都是同步的代码，先return，再执行后续的then

new Promise(function (resolve, reject) {
    setTimeout(function () {
        resolve('1111111')
    }, 1000)
})
.then(function (value) {
    setTimeout(function () {
        console.log('输出上一个定时器的返回结果：', value)
        return '22222222'
    }, 1000)

})
.then(function (value) {
    setTimeout(function () {
        console.log('输出上一个定时器的返回结果：', value)
    }, 1000)
})

这里输出的是
输出上一个定时器的返回结果：1111111
输出上一个定时器的返回结果：undefined
因为，第一个的then会等resolve的返回结果，但是，第二个then不会等第一个then中return的结果
如果想要第二个then等待第一个then的结果，需要在第一个then中return一个promise实例并resolve或者reject，并且异步内容要写在promise实例的函数中，例如：
new Promise(function (resolve, reject) {
    setTimeout(function () {
        resolve('1111111')
    }, 1000)
})
.then(function (value) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            console.log('输出上一个定时器的返回结果：', value)
            resolve('2222')
        }, 1000)
    })
})
.then(function (value) {
    console.log('输出上一个定时器的返回结果：', value)
})

6.then方法返回值结果状态由什么决定？

由then中执行的回调函数决定。

如果then中的回调函数抛出异常，新promise的PromiseState变为rejected，PromiseResult为抛出的异常的结果。

如果then中的回调函数返回的是非promise值，新的promise的PromiseState变为resolved，PromiseResult为该返回的值。

如果then中的回调函数返回的是一个promise对象，则新的promise的状态和结果为该promise的状态和结果。


var p = Promise.resolve(1)
p.then((value)=>{
    //1、返回一个Promise 调用resolve
    新建promise的resolve传出的值将作为then方法返回的promise的resolve的值传递出
    return new Promise(function(resolve,rejected){
        resolve(value + 1)
    })
    //2、返回一个Promise 调用rejected
    新建promise的reject传出的值将作为then方法返回的promise的reject的值传递出
    return new Promise(function(resolve,rejected){
        rejected(value + 1)
    })
    //3、返回一个值
    return的值将作为then方法返回的promise的resolve的值传递出
     return value + 1;
 
    以下四、五、六种情况，then方法的函数没有返回值,导致下一个then的resolve参数是undfined
    //4、新建一个promise，使用reslove返回值
    const newp = new Promise(function(resolve,rejected){
        resolve(value + 1)
    })
    //5、新建一个promise，使用return返回值
    const newp = new Promise(function(resolve,rejected){
        return(value + 1)
    })
    //6、没有返回值
    return undefined
}).then((value)=>{
   console.log("情况{n}：resolve",value)
}, (res) => {
    console.log("情况{n}：reject", res);
})

7.异常穿透

当使用promise的then链式调用时，可以在最后指定失败的回调

前面任何操作出了异常，都会传到最后失败的回调中

8.如何中断promise链：

当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数

办法：在回调函数中返回一个pendding状态的promise对象，即在需要中断的then中返回一个pendding状态的promise对象

二、 Promise相关的API的使用

1.promise的构造函数，会在promise内部立即同步调用，异步操作在执行器中执行。

var p = new Promise(function(){
    console.log('11')
    resolve('成功')
}.then( function(data){
    console.log(data)
}

2.resolved方法，是函数对象的方法

        //如果传入的参数为非Promise对象，则返回的结果为成功的Promise对象
        var p1 = Promise.resolve(423);
        //如果传入的参数为Promise对象，则传入的参数结果决定了resolve的结果，
        //如果传入的参数成功，则resolve为参数的resolve值；如果传入的参数失败，则reject为参数的reject值
        var p1 = Promise.resolve(new Promise(function(resolve,reject){
            reject(err);
            resolve('正常返回！！！');
        }));

3.reject方法，也是函数对象的方法

        //无论在reject内传入什么，返回的结果都是失败，传入的是什么失败的结果就是什么
        var p1 = Promise.reject(423);
        var p1 = Promise.reject(new Promise(function(resolve,reject){
            // reject(err);
            resolve('正常返回！！！');
        }));

4.all方法

参数为多个promise实例对象组成的数组，返回一个新的promise对象，只有数组中所有的promise对象都成功才成功，只要有一个失败了就失败。

如果成功，新的promise对象的成功结果为数组中所有promise对象成功的结果组成的数组。

[[PromiseState]]: "fulfilled"

[[PromiseResult]]: Array(3)

var p1 = new Promise(function(resolve,reject){
            resolve("ojbk");
        })
var p2 = Promise.resolve('yes');
var p3 = Promise.resolve('ok');
const result = Promise.all([p1,p2,p3]);
console.log(result);

如果失败，新的promise对象的失败结果为数组中第一个失败的对象失败的结果。

[[PromiseState]]: "rejected"

[[PromiseResult]]: "FAILED"

var p1 = new Promise(function(resolve,reject){
            resolve("ojbk");
        })
        var p2 = Promise.resolve('yes');
        var p3 = Promise.reject('FAILED');
        const result = Promise.all([p1,p2,p3]);
        console.log(result);

5.race方法

参数为多个promise对象组成的数组，返回值为一个新的promise对象，结果为第一个改变的promise对象的结果。

var p1 = new Promise(function(resolve,reject){
            resolve("ojbk");
            
        })
        var p2 = Promise.reject('yes');
        var p3 = Promise.reject('FAILED');
        const result = Promise.race([p1,p2,p3]);
        console.log(result);

结果为：

[[PromiseState]]: "rejected"

[[PromiseResult]]: "yes"

三、async和await

async函数

添加async的函数，返回值是一个promise对象。返回的promise对象的结果，由return的结果决定，规则和then返回规则相同。

如果return非promise对象:
    如  async function getInfo() {
            ...其他代码
            return 321
        }
    那么调用getInfo返回的promise对象的PromiseResult等于321，PromiseState为fulfilled

如果return promise对象
    如  async function getInfo() {
            ...其他代码
            return new Promise(function (resolve,reject) {
                resolve('成功了')
            })
        }
    那么返回的promise对象的PromiseResult='成功了'，PromiseState=fulfilled