Promise 如何返回值,而不是返回 Promise 对象_为什么 Promise 返回值一直都是 undefined。都是 undefined。一、需求定义一个 foo 函数,在里面执行异步操作
Promise 如何返回值,而不是返回 Promise 对象。实际开发中使用封装好的异步请求函数,为什么调用该函数返回的值一直都是 undefined。
一、需求
定义一个 foo
函数,在里面执行异步操作,然后取得 Promise.then
中的值并 return
出来,以便在别的地方使用该返回值。
该需求可以用伪代码表示如下:
function foo() {
}
result = foo()
console.log(result)
二、遇到的问题
1. 返回 undefined
问题代码:
function foo() {
var p = new Promise((resolve, reject) => {
resolve('hello world!')
});
p.then(value => {
return value
})
}
result = foo()
console.log(result)
问题原因:
最直接的原因,foo
函数没有返回值,所以是 undefined
。里面的 return
语句是写在箭头函数里的,所以箭头函数的 return
不是 foo
函数的。
2. 没有返回正确的值
问题代码:
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)
问题原因:
同步和异步的问题,「无法在当前获得未来的值」。前面声明了 result
,而后面对它的赋值发生在异步操作中。
三、正确的方法
经过一番研究,得出结论:不可能实现直接将 Promise.then
中的值 return
出来。
正确的使用方式只能是:return
出 Promise
对象,然后在 .then
的执行体中处理异步请求得到的值(或者用 async/await
)。
1. 返回 Promise 对象
function foo() {
return new Promise((resolve, reject) => {
resolve('Success!')
});
}
result = foo()
console.log(result)
2. 使用 .then 处理返回的数据
function foo() {
return new Promise((resolve, reject) => {
resolve('hello world!')
});
}
p = foo()
p.then(result => console.log(result))
3. 使用 async/await 处理返回的数据
function foo() {
return new Promise((resolve, reject) => {
resolve('hello world!')
});
}
(async function () {
result = await foo()
console.log(result)
})()
五、实战代码
将异步请求封装成一个方法,并 return
异步请求结果给变量。
function getSomething() {
return new Promise(resolve => {
service.getList().then(res => {
resolve(res)
})
})
}
async function asyncFn() {
let returnData = await getSomething()
return returnData
}
asyncFn().then(value => {
let data = value
})