您的位置: 首页  >  文章  >  关于Promise的一些个人理解

关于Promise的一些个人理解

分类: 文章 • 2023-03-24 21:22:11

参考来源：
http://es6.ruanyifeng.com/#docs/promise#
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise是什么

所谓的Promise是一个容器，它允许你为异步操作的成功和失败分别绑定相应的处理方法，返回一个能代表未来出现的结果的promise对象。
（os：什么鬼玩意，我自己看着都觉得绕口）
大白话：Promise里面保存一些未来结束的事件（异步操作），然后你可以在它的状态下绑定处理方法

Promise特点

一个 Promise有以下几种状态:

pending: 初始状态
fulfilled: 操作成功
rejected: 操作失败

(1)只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态（改变是不可能的，这辈子都不可改变的）。

(2)一旦状态改变，就不会再变，任何时候都可以得到这个结果。
关于Promise的一些个人理解

基本用法

function promise1() {
    let p = new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve('我是任务1')
        },1000)
    });
    return p
}
promise1().then(function (data) {
    console.log(data);
})

ps:为了更好的理解then方法分开写了。

Promise方法

Promise方法就那个几个，咱们先浏览器输出下看下
关于Promise的一些个人理解

从上图可看到Promise方法有all、race、reject、resolve、catch、then

其中catch、then是定义在Promise.prototype也就是原型上面的

(1)then方法-一个爱出风头的方法：

它的作用是为Promise实例添加状态改变时的回调函数，
then方法的第一个参数是resolved状态的回调函数，
第二个参数（可选）是rejected状态的回调函数。
换言之就是说，Promise不管你执行成功还是失败，获取数据都要在then做获取（then：服不服？我就问你服不服）。

注意事项：then方法返回的是一个新的Promise实例，因此可以采用链式写法，即then方法后面再调用另一个then方法

promise1().then(function (data) {
    console.log(data);
    return promise2()
}).then(function (data) {
    console.log(data);
    return promise3()
})
(2)catch方法-救护车

大家记不记得then方法可以传两个参数（都是回调），（我们暂时就叫她们为a和b这样方便下文的理解）她们分别是执行成功的回调和失败的回调。但是如果你代码错误呢~这时候就用到catch，除了这点以外catch方法和b都是一样的，是指定Promise实例为“rejected状态”的回调函数

promise1().then(function (data) {
    console.log(data);
    return promise2()
},function(data) {
   console.log(data);
}).catch(function (data) {
    console.log(data);
})

这里我特意把then的两个回调都写了，为了看的更清楚，b回调函数和catch是一样的作用，只是如果Promise实例在a回调函数的时候代码错误（抛出异常）那么在没写catch的时候，整个js直接卡主，死机。

(3)resolve方法：

把对象转化成Promise对象

function promise3() {
    let p = new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve('我是任务3')
        },1000)
    }).then(function (data) {
           console.log(data);//'我是任务3'
       })
    return p
}

什么鬼，这不就是传值嘛，哈哈，意思差不太多~只是resolve会转化下这个对象，人家不仅仅转化对象，还可以转化Promise对象和带then的对象哦（外界叫它thenable）
返回值：

    Promise.resolve(value);//把value转化成promise对象
    Promise.resolve(promise);//直接返回promise
    Promise.resolve(thenable);//把这个对象转为 Promise 对象然后就立即执行thenable对象的then方法。

嗨呀，它就是Promise实例执行成功的回调，说了一大堆全是废话！

(4)reject方法：

相反的它就是Promise实例执行失败的回调

function promise4(){
    let p = new Promise(function(resolve, reject){
        setTimeout(function(){
            let num = Math.random()*10;
            if(num<=5){
                resolve(num);
            }
            else{
                reject('我败了');
            }
        }, 1000);
    }).then(function(data) {
      console.log(data)
    },function(reason) {
        console.log(reason)//拒绝原因
    })
    return p;
}

这个B返回一个带有拒绝原因reason参数的Promise对象

(5)all方法：

这个方法还挺别致的，可以一起发送多个异步操作

用法

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});

all接收的是Promise对象哦，你要把多个Promise一起用数组的方式传进去。
注意：当all参数中有一个Promise对象的状态变成了rejected（失败）那么all就返回第一个失败的promise结果
这个方法嘛，就一个字酷

(6)race方法：

这个方法更别致，也是一起发送多个异步操作，但是唯一不同的是，参数的Promise对象谁有结果了那返回谁（管你失败还是成功）

let promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});

let promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);//two
});

差不多就以下这个意思：

race：兄弟你们两比比看谁跑的话，谁跑的快，那我让谁嘿嘿嘿

    promise：好像就讲完了，那就结束吧！
    finally：稍等一下，还有我呢！
    promise：你谁啊~
    finally：我finally
    promise：行行行，补票上车
(7)finally方法：

这是一个es2018的方法，目前浏览器还不支持，看上面我在控制台输入的图。
它的意思就是我管你这个实例干嘛，反正最后我都要执行

promise1().then(result => {
    // /xxx
}).catch(error => {
    // /xxx
}).finally(() => {
    // /xxx
});

以上就是本人对于promise的一些个人理解，如果错误之处往指正！

相关推荐