网站设计的文案,做网站的升级人,北京搬家公司排名,东莞营销型网站哪家好Promise 如何返回值#xff0c;而不是返回 Promise 对象。实际开发中使用封装好的异步请求函数#xff0c;为什么调用该函数返回的值一直都是 undefined。
一、需求 定义一个 foo 函数#xff0c;在里面执行异步操作#xff0c;然后取得 Promise.then 中的值并 return 出来…Promise 如何返回值而不是返回 Promise 对象。实际开发中使用封装好的异步请求函数为什么调用该函数返回的值一直都是 undefined。
一、需求 定义一个 foo 函数在里面执行异步操作然后取得 Promise.then 中的值并 return 出来以便在别的地方使用该返回值。
该需求可以用伪代码表示如下
javascript
function foo() {// 执行异步操作得到 hello world! 字符串并 return 出去
}
result foo()
console.log(result) // 预期结果打印出 hello world!二、遇到的问题
1. 返回 undefined **问题代码**
javascript
function foo() {var p new Promise((resolve, reject) {resolve(hello world!)});p.then(value {return value})
}
result foo()
console.log(result) // undefined问题原因
最直接的原因foo 函数没有返回值所以是 undefined。里面的 return 语句是写在箭头函数里的所以箭头函数的 return 不是 foo 函数的。
2. 没有返回正确的值 **问题代码**
javascript
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 对象 **javascript**
function foo() {return new Promise((resolve, reject) {resolve(Success!)});
}
result foo()
console.log(result) // [object Promise]2. 使用 .then 处理返回的数据 **javascript**
function foo() {return new Promise((resolve, reject) {resolve(hello world!)});
}
p foo()
p.then(result console.log(result)) // hello world!2. 使用 async/await 处理返回的数据 **javascript**
function foo() {return new Promise((resolve, reject) {resolve(hello world!)});
}
// 通过async/await去操作得到的Promise对象
(async function () {result await foo()console.log(result) // hello world!
})()五、实战代码 将异步请求封装成一个方法并 return 异步请求结果给变量。
javascript
// 1. 封装数据请求方法异步
function getSomething() {return new Promise(resolve {service.getList().then(res {resolve(res)}) })
}
// 2. 使用 Promiseasync 实现
async function asyncFn() {let returnData await getSomething()return returnData
}
// 3. 因为asyncFn()返回的是 Promise对象而不是直接返回值所以需要.then来获取值进行操作
asyncFn().then(value {let data value
})案例使用 // 根据数据类型获取数据源列表getDataStorage(type: string) {return new Promise(resolve {const params: object {dataType: type};getDataStorage(params).then(res {resolve((res as any).data);}).catch(err {// doalert(err);});});}// sink卡片中数据源类型切换时获取数据源列表getPushSourceOptions(val: string) {const p this.getDataStorage(val);p.then(result {const tabActive parseInt(this.editableTabsValue) - 1;(this.form.dcWebSinkInfoDTO.sinkUnitDTOList[tabActive].dcWebPushUnitDTO.pushSourceOptions as any) result;});}
