Promise基础(消化错误和抛出错误)

本文详细解析了JavaScript中Promise对象的工作原理,包括then、catch、finally等方法的使用方式及内部实现机制,帮助读者深入理解异步编程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

then

then 函数的会接收两个回调函数,一个是 onFulfilled 函数,一个是 onRejected 函数

如果这两个回调函数没有写返回值,默认会 return undefined;

进入下一个函数的 onFulfilled 函数中

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    console.log("success1", success1); // "success2" 22
    // 没写 return 默认返回 return undefined
  },
  (err1) => {
    console.log("err1", err1);
  }
).then(
  (success2) => {
    console.log("success2", success2); // "success2" undefined
  },
  (err2) => {
    console.log("err2", err2);
  }
);

在这两个回调中 return xxx ,相当于调用 return new Promise((resolve) => resolve(xxx));

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    return new Promise((resolve, reject) => resolve("success"));
    // 等价于
    return "success";
  },
  (err1) => {
    console.log("err1", err1);
  }
).then(
  (success2) => {
    console.log("success2", success2); // "success2" "success"
  },
  (err2) => {
    console.log("err2", err2);
  }
);

onFulfilled 函数和 onRejected 函数中默认返回的都是成功,如果需要返回失败需要显示调用 reject 或者用 throw 抛出错误可以

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    return new Promise((resolve, reject) => reject("error"));
    // 等价于
    // throw "error";
  },
  (err1) => {
    console.log("err1", err1);
  }
).then(
  (success2) => {
    console.log("success2", success2);
  },
  (err2) => {
    console.log("err2", err2); // "err2" error
  }
);

总结:在 then 回调中 return xxx 会被自动包装成 return new Promise((resolve) => resolve(xxx));

catch

catch 是用来处理 rejected 状态,是 then 函数的一种特例,相当于 then(null, (err) => {});

catch 为什么能捕获前面的错误?

onRejected 函数中,如果没有显示抛出错误,默认会 return undefined; 进入一下个 onFulfilled 函数

finally

finally 不管当前 promise 是什么状态都会执行,也是 then 函数的一种特例,相当于 `then(result => result, err => new Promsie((_, reject) => reject(err)));

Promise.resolve

Promise.resolvePromisefulfilled 状态时的简写,相当于 new Promise(resolve => resolve(xxx))

onFulfilled 函数接收参数

  • 当参数是普通参数时,会直接传递给后面 then 函数
    new Promise((resolve) => resolve({ name: "uccs" })).then((data) => {
      console.log(data);
    });
    
  • 当参数是 Promise 对象时,后面的 then 会根据传递的 Promise 对象的状态变化执行哪一个回调
    const p = new Promise((resolve, reject) => {
      setTimeout(resolve, 1000, "我执行了");
    });
    new Promise((resolve) => resolve(p)).then((data) => {
      console.log(data);
    });
    
  • 具有 then 方法的对象
    • 用这种这种方式,如果需要改变 Promise 状态是,不能使用 return 形式,这个 then 方法也是有两个回调函数的:onFulfilledonRejected
    const thenable = {
      then(resolve, reject) {
        console.log("thenable");
      },
    };
    new Promise((resolve) => resolve(thenable)).then((data) => {
      console.log(data);
    });
    

Promise.reject

Promise.rejectPromiserejected 状态是的简写,相当于 new Promise((_, reject) => reject(xxx))

onRejected 函数不管接收什么参数,都会原封不动的向后传递,作为后续方法的参数

Promise抛出错误时,有几种不同的方式可以捕获这些错误。 首先,在使用Promise时,可以使用`catch`方法来捕获Promise链中的错误。例如,在一个`.then`方法中抛出错误,可以在后续的`.catch`方法中捕获这个错误。这样可以确保错误被捕获并进行相应的处理。 另外,也可以使用`try-catch`语句来捕获Promise中的错误。但是需要注意的是,`try-catch`语句只能捕获同步的错误,而不能捕获异步的错误。因为Promise错误是在微任务队列中执行的,而`try-catch`语句只能捕获主线程的错误。 另外,还可以使用`window.onerror`方法来监听全局错误。这个方法可以捕获包括Promise中的错误在内的所有全局错误。可以通过给`window.onerror`赋值一个函数来监听全局错误,并进行相应的处理。 总结起来,Promise抛出错误可以使用`catch`方法、`try-catch`语句`window.onerror`方法来捕获处理。具体使用哪种方式取决于具体的需求场景。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Promise错误处理简要分析](https://blog.csdn.net/weixin_37562062/article/details/115448472)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值