将Promise.then中的值直接return出来调用

55 篇文章 8 订阅
51 篇文章 0 订阅

在这里插入图片描述

需求:定义一个 getGoodsList 函数,在里面执行异步操作,然后取得 Promise.then 中的值并 return 出来,以便在别的地方使用该返回值。

初始代码:

function getGoodsList () {
// 执行异步操作得到列表数组,并且 return 出去
}
result = getGoodsList ()
console.log(result) // undefined

添加一个Promise时,例如列表返回使用this is goodslist代替!!!

function getGoodsList () {
     var p = new Promise((resolve, reject) => {
     resolve('hello world!')
     });
     p.then(value => {
         return value
     })
}
result = getGoodsList ()
console.log(result) // undefined

分析:最直接的原因,getGoodsList 函数没有返回值,所以是 undefined。里面的 return 语句是写在箭头函数里的,所以箭头函数的 return 不是 getGoodsList 函数的。

没有返回正确的值时:

function getGoodsList () {
      let result = ''
      var p = new Promise((resolve, reject) => {
                resolve('this is goodslist')
      });
      p.then(value => {
           result = value
      })
      return result
}
result = getGoodsList ()
console.log(result) // ""

原因:同步和异步的问题,「无法在当前获得未来的值」。前面声明了 result,而后面对它的赋值发生在异步操作中。

最终方法:不可能实现直接将 Promise.then 中的值 return 出来。正确的使用方式只能是:return 出 Promise 对象,然后在 .then 的执行体中处理异步请求得到的值(或者用 async/await)。

1、 返回 Promise 对象

function getGoodsList () {
      return new Promise((resolve, reject) => {
           resolve('Success!')
      });
}
result = getGoodsList ()
console.log(result) // [object Promise]

2、 使用 .then 处理返回的数据

function getGoodsList () {
      return new Promise((resolve, reject) => {
             resolve('this is goodslist')
      });
}
p = getGoodsList ()
p.then(result => console.log(result)) // "this is goodslist"

3、使用 async/await 处理返回的数据

function getGoodsList () {
      return new Promise((resolve, reject) => {
            resolve('this is goodslist')
      });
}
// 通过async/await去操作得到的Promise对象
(async function () {
      result = await getGoodsList ()
      console.log(result) // "this is goodslist"
})()

4、实战代码
将异步请求封装成一个方法,并 return 异步请求结果给变量。

// 1. 封装数据请求方法(异步)
function getSomething() {
      return new Promise(resolve => {
            service.getList().then(res => {
                 resolve(res)
            })
       })
}
// 2. 使用 Promise+async 实现
async function asyncFn() {
      let returnData = await getSomething()
      return returnData
}
// 3. 因为asyncFn()返回的是 Promise对象,而不是直接返回值,所以需要.then来获取值进行操作
asyncFn().then(value => {
      let data = value
})
return Promise.reject 和直接 Promise.reject 的区别在于返回的不同。当使用 return Promise.reject 时,它会返回一个被拒绝的 Promise 对象,该对象的状态为 Rejected,并且传递给它的参数将作为拒绝的原因。这意味着该 Promise 对象将触发 catch() 或者 then() 方法的拒绝回调函数。 而直接使用 Promise.reject 则是调用 Promise.reject 方法,返回一个新的 Promise 对象,状态为 Rejected,不会返回给调用者。这意味着需要手动处理该 Promise 对象的拒绝回调函数。 所以,return Promise.reject 可以方便地将 Promise 的拒绝原因传递给调用者,而直接 Promise.reject 则需要手动处理拒绝回调函数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [手写promise原理系列七:封装Promise.reject方法,Promise.reject的用法](https://blog.csdn.net/ThisEqualThis/article/details/129497731)[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_2"}}] [.reference_item style="max-width: 50%"] - *2* [Promise.resolve() 和Promise.reject() 使用及其覆盖场景](https://blog.csdn.net/qq_40696108/article/details/123063870)[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_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值