前端开发您现在的位置是:首页 > 博客日志 > 前端开发

如何将Promise.then中的值直接return出来

<a href='mailto:'>微wx笑</a>的头像微wx笑 2020-12-26前端开发 6 0关键字: vue  Promise  

Promise 如何返回值,而不是返回 Promise 对象。实际开发中使用封装好的异步请求函数,为什么调用该函数返回的值一直都是 undefined。

一、需求

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

该需求可以用伪代码表示如下:RSv无知

function foo() {
  // 执行异步操作得到 "hello world!" 字符串,并 return 出去
}

result = foo()
console.log(result)  // 预期结果:打印出 "hello world!"

二、遇到的问题

1. 返回 undefined

问题代码:RSv无知

function foo() {
  var p = new Promise((resolve, reject) => {
    resolve('hello world!')
  });
  p.then(value => {
     return value
  })
}

result = foo()
console.log(result)  // undefined

问题原因:RSv无知

最直接的原因,foo 函数没有返回值,所以是 undefined。里面的 return 语句是写在箭头函数里的,所以箭头函数的 return 不是 foo 函数的。RSv无知

2. 没有返回正确的值

问题代码:RSv无知

function foo() {
  let result = ''
  var p = new Promise((resolve, reject) => {
    resolve('hello world!')
  });
  p.then(value => {
    result = value
  })
  return result
}

result = foo()
console.log(result) // ""

问题原因:RSv无知

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

三、正确的方法

经过一番研究,得出结论:不可能实现直接将 Promise.then 中的值 return 出来。RSv无知

正确的使用方式只能是:return 出 Promise 对象,然后在 .then 的执行体中处理异步请求得到的值(或者用 async/await)。RSv无知

1. 返回 Promise 对象

function foo() {
  return new Promise((resolve, reject) => {
    resolve('Success!')
  });
}

result = foo()
console.log(result)  // [object Promise]

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

function foo() {
  return new Promise((resolve, reject) => {
    resolve('hello world!')
  });
}

p = foo()
p.then(result => console.log(result)) // "hello world!"

2. 使用 async/await 处理返回的数据

function foo() {
  return new Promise((resolve, reject) => {
    resolve('hello world!')
  });
}

// 通过async/await去操作得到的Promise对象
(async function () {
  result = await foo()
  console.log(result)  // "hello world!"
})()

五、实战代码

将异步请求封装成一个方法,并 return 异步请求结果给变量。RSv无知

// 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
})


RSv无知

  转自: 文渊博客 》如何将Promise.then中的值直接return出来RSv无知

本文为转载文章,版权归原作者所有,不代表本站立场和观点。

很赞哦! () 有话说 ()