Promise、then()、catch()详解

最新推荐文章于 2024-05-16 10:54:35 发布
最新推荐文章于 2024-05-16 10:54:35 发布
阅读量1w 收藏 39
点赞数 13
分类专栏： 前端 JavaScript 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53848768/article/details/121317467
版权

Promise

Promise是ES6新增的引用类型，通过new来实例化时需要传入执行器函数(executor)作为参数，这个执行器函数内部可以封装异步操作。

Promise类的实例对象是有**状态(state)**的，对应三个值：pending(待定)、fullfilled(成功)、rejected(失败)

(实例的初始状态为pending，一旦由pending状态落定成fulfilled状态或rejected状态，就不可再次改变，该过程是不可逆的）

与之对应，Promise类实例对象有成功的结果(value)和失败的原因(reason)，默认值都为undefined，只有状态被改变后(从初始默认状态落定成功或失败的状态)才会为其赋值。

注意：Promsie内部的state、value、reason是私有的，外界是访问不到的

//向里面传入执行器函数，执行器函数默认两个参数对应改变状态的两个函数
let promise=new Promise((resolve,reject)=>{
    
    //...一系列操作...
    
    //改变实例的状态：pedding->fulfilled，成功的结果value为“我是成功的结果”
    resolve("我是成功的结果")
})

console.log(promise)

请添加图片描述

//向里面传入执行器函数，执行器函数默认两个参数对应改变状态的两个函数
let promise=new Promise((resolve,reject)=>{
        
    //...一系列操作...
    
    //改变实例的状态：pedding->rejected，失败的原因reason为“我是失败的原因”
    reject("我是失败的原因")
})

console.log(promise)

请添加图片描述

正如开头说的，在我们实例化一个Promise时会传入一个执行器函数来进行一系列的操作，这个执行器函数接受两个参数：resolve、reject他们都是回调函数，用来落定状态。在这个执行器函数里面就可以根据这一系列的操作的实际情况通过这两个回调来规定该实例对象的状态是fulfilled(成功)，还是rejected(失败)，并设置成功的结果或失败的原因。

注意：如果在执行器函数内部抛出错误也会是promsie实例的状态落定成rejected

关于resolve回调函数的参数

  • 传入普通的值或对象，Promise实例的状态直接落定成fulfilled(正如上面的示例)

  • 传入一个新的Promise实例，当前的Promise实例的状态由这个新的Promise来决定，转态转移。

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

    //...一系列操作...
	//状态转移为新的Promise
    resolve(new Promise((res, rej) => {
        rej('cuole')
    }))
})
console.log(promise)

    请添加图片描述

  • 传入一个对象，并且这个对象内部实现了then方法，那么会自动执行这个then方法同时会将resolve和rejected回调传到then方法中，又这个then方法来决定最终的转态

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

    //...一系列操作...
    const obj = {
            then() {
                console.log(233)
                return 123
            }
        }
    resolve(obj)
})

    请添加图片描述

    
let promise = new Promise((resolve, reject) => {
    //...一系列操作...
    const obj = {
        	//这里会自动将res和rej回调传递进来
            then(res, rej) {
                console.log(233)
                //最终转态落定成功，成功的结果为233
                res('233')
            }
        }
        //改变实例的状态：pedding->fulfilled，成功的结果value为“我是成功的结果”
    resolve(obj)
})
console.log(promise)

    请添加图片描述

上面的后两种特殊情况也可能交替出现：

let promise = new Promise((resolve, reject) => {
    //...一系列操作...
    const obj = {
            then(res, rej) {
                console.log(233)
                res('467987987416455')
            }
        }
    resolve(obj)
})
let promise2 = new Promise((res, rej) => {
    //这里执行的res参数是一个Promsie实例，并且这个实例里面执行resolve时传入的是一个实现了then方法的对象
    res(promise)
})
console.log(promise2)

请添加图片描述

let promise2 = new Promise((res, rej) => {
    res('564659879')
})
let promise = new Promise((resolve, reject) => {
    //...一系列操作...
    const obj = {
            then(res, rej) {
                console.log(233)
                //这里then方法的res执行的参数是一个Promsie实例
                res(promise2)
            }
        }
        //
    resolve(obj)
})

console.log(promise)

请添加图片描述

上面说到Promise内部的值是私有的，那么外部代码需要访问这个成功或失败的值呢？这时候就需要Promsie类为我们提供的方法了。

Promise.prototype.then()

  • then()

在原型上的then方法最多接收两个参数，onResolved处理程序和onRejected处理程序，都是可选的。通过这两个参数我们可以拿到实例成功或失败的结果。同时then方法也会返回一个新的Promise实例对象(下面一律称为promise2)。

注意：只有Promsie内部的状态落定了，then方法中对应的处理程序才会执行。

//向里面传入执行器函数，执行器函数默认两个参数对应改变状态的两个函数
let promise = new Promise((resolve, reject) => {
    //改变实例的状态：pedding->fulfilled，成功的结果value为“我是成功的结果”
    reject("我是失败的原因")
})
promise.then(undefined, reason => {
    console.log(reason)
})
//打印 “我是失败的原因”

let promise = new Promise((resolve, reject) => {
    //抛出一个错误
    throw new Error('over')
})
let promise2 = promise.then(undefined, reason => {
        console.log(reason)
    })
//打印  Error: over
//......
  • 链式调用

上面说到then方法返回一个新的Promise实例，那么就再次可以使用then方法，不断地.then().then()，以此类推：new Promsie((res,rej)=>(res(‘bar’))).then().then().then() … ,这就是then方法的强大之处，可以链式调用

举个例子：

//定义一个函数，里面有两个参数，str和回电函数
function fn(str, callback = null) {
    //一秒后打印str，并执行回调函数
    setTimeout(() => {
        console.log(str)
        if (callback) {
            callback()
        }
    }, 1000)
}
fn('你', () => {
    fn('好', () => {
        fn('啊')
    })
})
//打印结果：
// 你（1秒后）
// 好（2秒后）
// 啊（3秒后）

这里只有三次回调，真实的业务要比这复杂得多，那么回调会更多。如果没有更方便更直观的方法，那么就这样一直回调，回调，回调…

下面使用Promise实现的同样的功能：

function fn2(str) {
    return new Promise((res, rej) => {
        setTimeout(() => {
            console.log(str)
            res()
        }, 1000)
    })
}
fn2('你')
    .then(() =>
        fn2('好')
    ).then(() =>
        fn2('啊')
    )
//打印结果：
// 你（1秒后）
// 好（2秒后）
// 啊（3秒后）

这里面虽然没有通过链式调用来拿上一次的结果，但是就这个例子而言已经可以看出相比上面的写法通过promise更为直观。then里面的处理程序会等待前一个实例解决，然后实例化一个新的实例并返回，这样可以串行异步任务。

说到then返回一个新的promsie实例，那么then方法返回一个什么样的promise实例呢，里面是成功的还是失败的呢？下面总结了几个规则：

  • then方法内没有传入相应的处理程序，或者原promise处于pending状态都会返回一个和原来相同的promsie2（虽然二者看起来一样，但是指针指向的不是同一个对象）
let A = new Promise((res, rej) => {
    rej('123')
})
console.log(A.then())
console.log(A.then(()=>{},undefined))
console.log(A)
console.log(A===A.then())

请添加图片描述

let A = new Promise((res, rej) => {
    setTimeout(() => {
        rej('123')
    }, 3000)
})
let promise2 = A.then(undefined, () => {
    return "111"
})
//此时原本的A实例处于pending状态，处理程序没有执行，打印的then方法返回的promise2也处于pedding状态
console.log(promise2)
//定时四秒超时后A的状态早已落定，then执行了onResolved处理程序(为啥返回结果不一样呢，往下看)
setTimeout(() => {
        console.log(promise2)
    }, 4000)

请添加图片描述

  • 对应的位置传入了处理程序(看返回值)：
    （1）如果对应的处理程序返回值不是一个promsie对象，那么返回的promise2对象执行了resolve(处理程序的返回值)

    let A = new Promise((res, rej) => {
    res('123')
})
let promise2 = A.then(value => {
    console.log('我拿到了成功的结果' + value)
    return "我是promise2的结果"
})
console.log(promise2)

    请添加图片描述

    let A = new Promise((res, rej) => {
    rej('123')
})
let promise2 = A.then(undefined, reason => {
    console.log('我拿到了失败的原因' + reason)
    return "我是promise2的结果"
})
console.log(promise2)

    请添加图片描述

    （2）如果对应的处理程序的返回值是一个promsie对象/一个实现了then方法的普通对象，那么返回的promise2的转态由这个promise对象/普通对象的then方法来决定

    let A = new Promise((res, rej) => {
    rej('123')
})
let promise2 = A.then(undefined, () => {
    return new Promise((res, rej) => {
        res('111')
    })
})
console.log(promise2)

请添加图片描述

​

      let A = new Promise((res, rej) => {
        rej('123')
    })
    let promise2 = A.then(undefined, () => {
        return new Promise((res, rej) => {
            //无结果
        })
    })
    console.log(promise2)

请添加图片描述

    let A = new Promise((res, rej) => {
        rej('123')
    })
    let promise2 = A.then(undefined, () => {
        return new Promise((res, rej) => {
            rej("111")
        })
    })
    console.log(promise2)

请添加图片描述

        let A = new Promise((res, rej) => {
            rej('123')
        })
        let promise2 = A.then(undefined, () => {
            return {
                then(res, rej) {
                    //如果没有落定状态，那么最后的promsie2也是pending状态
                    rej('456')
                }
            }
        })
        console.log(promise2)

请添加图片描述

（3）执行对应处理程序出现异常，返回的promsie2执行了reject(e)

let A = new Promise((res, rej) => {
    rej('123')
})
let promise2 = A.then(undefined, () => {
    throw(new Error('出错啦'))
})
console.log(promise2)

请添加图片描述

Promise.protorype.catch

catch方法就是一个语法糖，只接收一个参数，onRejected处理程序。他的作用和调用Promise.prototype.then(null,onRejected)是一样的。

let promise1 = new Promise((res, rej) => {
    //打印一个未定义的变量，这里会出错
    console.log(a)
    res()
})

//控制台是一样的结果
promise1.then(null, reason => console.log(reason))
promise1.catch(reason => console.log(reason))

请添加图片描述

思考一下如果这样的写法，结果会是什么样呢？

promise.then(null, reason => console.log(reason)).catch(reason => console.log(reason))

请添加图片描述

这个catch捕捉的还是promsie1的错误，他的实现原理是最先捕捉第一个promise也就是promsie1，如果没出错则向下(返回的新的promise)捕捉，以此类推。而不是我们想象的返回的新的promise来调用catch，这个cath就会取捕捉这个返回的新的promise出现的错误。

let promise1 = new Promise((res, rej) => {
    res('success')
})

promise1.then(vaue => new Promise((res, rej) => {
    rej('失败啦0.0')
}), null).catch(reason => console.log(reason))

//打印：
//失败啦0.0

这里很明显捕捉的是返回的promise实例而不是promsie1实例

Coder_xuxu
关注
  • 13
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Promise函数的详解
01-20
Promise函数是异步编程的一个解决方案，相对传统的解决方案，他更合理和强大。Promise的本意是“承诺”、“许诺”的意思。承诺在未来会执行某个操作的函数，就是Promise函数。其基本结构如下： var promise = new ...
ES6关于Promise的用法详解
12-03
Node的产生，大大推动了Javascript这门语言在服务端的发展，使得前端人员可以以很低的门槛转向后端开发。 当然，这并不代表迸发成了全栈。... 想必接触过Node的人都知道，Node是以异步(Async)回调著称的...Promise 对象用
6.Promise构造函数，then方法，catch方法
yujiabao702的博客
04-05 275
excutor 函数会在 Promise 内部立即同步调用,异步操作(resolve 函数,reject 函数)在执行器中执行。Promise 对象异步操作成功或者失败的回调函数,返回一个新的 Promise 对象。resolve 函数: 内部定义成功时调用的函数 value => {}reject 函数: 内部定义失败时调用的函数 reason => {}onRejected 函数: 失败的回调函数 reason => {}onRejected 函数: 失败的回调函数 reason => {}
promise，async →await，then→catch，try→catch 使用简介
weixin_44434938的博客
03-13 954
promise，async →await，then→catch，try→catch 使用简介
C++中使用catch(…)处理所有异常
最新发布
qq_41317716的博客
05-16 430
C++中使用catch(…)处理所有异常
Promise的九大方法(resolve、reject、then、catch、finally、all、allSettled、race、any)你都用过那些？
code
01-03 767
Promise.rece()的使用方法和 Promise.all一样，接收一个promise 对象的数组为参数，Promise.race是要有一个promise对象进入Fulfilled或者 Rejected状态的话，就会继续进行后面的处理。如果这个promise对象的数组中没有一个promise 可以成功执行（即所有的 promise都失败 ），就返回一个失败的promise 和AggregateError类型的实例，它是Error的一个子类，用于把单一的错误集合 在一起。
Promise介绍then,catch用法，基础介绍（二）
tangxiaobao2016的博客
01-13 774
Promise.prototype.catch方法是.then(null,rejection)的别名，用于指定发生错误时的回调函数。2.then方法返回的是一个新的Promise,所以then可以无限次调用。2.1catch后面可以加then，如果没有报错则会跳过catch方法。1.是promise状态改变时的回调函数，then有2个回调函数。作用一样，以下是then的写法和catch的写法。回调函数的参数是上一个promise的返回值。Promise的方法：then和catch。2.catch的介绍。
js中try catch 和 then catch 的区别
HWL5679的博客
02-02 649
try...catch是用来处理运行时错误的，Promise的then...catch是用来处理异步操作的错误的。
关于Promise.catch()错误捕获机制的理解
热门推荐
weixin_44776206的博客
10-31 2万+
Promise.prototype.catch() ()错误捕获机制的理解 描述： 关于catch方法MDN的描述是这样的： Internally calls Promise.prototype.then on the object upon which is called, passing the parameters undefined and the onRejected handler received; then returns the value of that call (which is
Promise的.then .catch
weixin_30457881的博客
09-22 615
定义一个promise 调用promise 如果promise的状态为resolve 则 执行 .then 否则执行.catch 可以有多个.then 会按顺序执行 axios.post 可以后面跟多个then 转载于:https://www.cnblogs.com/jiangchengbiao/p/969039...
Promise中的then第二个参数和catch有什么区别？
gogo_steven的博客
12-02 3366
Promise中的then第二个参数和catch有什么区别？ 首页我们先要区分几个概念，第一，reject是用来抛出异常的，catch是用来处理异常的；第二：reject是Promise的方法，而then和catch是Promise实例的方法（Promise.prototype.then 和 Promise.prototype.catch）。 1. 区别 主要区别就是，如果在then的第一个函数里...
Javascript Promise用法详解
10-18
主要介绍了Javascript Promise用法详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解ES6 Promise对象then方法链式调用
12-10
then()方法会返回一个新的Promise实例，所以then()方法后面可以继续跟另一个then()方法进行链式调用。 let p = new Promise((resolve, reject) => { setTimeout(resolve, 1000, 'success'); }); p.the
JavaScript中Promise的使用详解
10-20
Promise，相信每一个前端工程师都或多或少地在项目中都是用过，毕竟它早已不是一个新名词。ES6中已经原生对它加以支持，在caniuse中搜索一下 Promise ，发现新版的chrome和firefox也已经支持。但是低版本的浏览器...
js中promise的catch怎么用
weixin_35750953的博客
12-29 898
在 JavaScript 中，Promise 的 catch 方法用于捕获并处理 Promise 对象抛出的错误。 使用方法如下： promise.catch(function(error) { // 处理错误的代码 }); 也可以使用箭头函数的写法： promise.catch(error => { // 处理错误的代码 }); 当 Promise 对象抛出错误时，会执行 ca...
Promise—关于catch（你真的了解catch的执行顺序吗）
weixin_37744697的博客
10-20 2042
一、问题 今天突然被同事问到一个问题，以下代码怎么输出： Promise.all([ new Promise(res => res(0)), new Promise((res, rej) => rej(1)) ]).then(v => { console.log('then 1 ====== ', v) }).catch(e => { console.log('catch 1 ====== ', e) }) Prom
Error与函数的预编译
HelloGad的博客
12-21 133
Error 常见的几种报错 1.TypeError 类型错误 2. SyntaxError 语法错误 3. RangeError 参数范围越界 4. ReferenceError 引用错误（找不到对象） 变量没有定义就使用 5. EvalError 6. URIError 1.Uncaught TypeError: Cannot read property...
.then .catch都执行的错误原因
xcytjdlb的博客
04-17 1969
.then()中的代码出错... 细心检查
Promise请求(使用then、catch或者async、await)
pmywy的博客
04-21 156
Promise请求
promise详解
05-31
Promise 是 JavaScript 中的一个对象，用于处理异步操作。它代表一个异步操作的最终完成或失败，并返回操作结果。 Promise 有三种状态： - pending（进行中）: 初始状态，不是成功或失败状态。 - fulfilled（已成功）: 意味着操作成功完成，返回了一个值。 - rejected（已失败）: 意味着操作失败，返回一个错误对象。 Promise 一旦状态改变，就不会再变，而且状态只能从 pending 变为 fulfilled 或从 pending 变为 rejected。 Promise 接受一个函数作为参数，该函数有两个参数：resolve 和 reject。在异步操作完成时，调用其中任意一个即可改变 Promise 的状态。 下面是一个简单的 Promise 示例： ```javascript const promise = new Promise((resolve, reject) => { // 异步操作 setTimeout(() => { const num = Math.random(); if (num > 0.5) { resolve(num); } else { reject(new Error('Promise rejected')); } }, 1000); }); promise.then(result => { console.log('Promise resolved:', result); }).catch(error => { console.error('Promise rejected:', error); }); ``` 在上面的示例中，创建了一个 Promise 对象，并在其中进行了一个异步操作。当异步操作完成后，根据结果调用 resolve 或 reject 函数。然后通过 then 和 catch 方法来获取操作结果或错误信息。 总的来说，Promise 是一种优雅的异步编程方案，可以避免回调地狱，使代码更加易读和可维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值