如何將Promise.then中的值直接return出來

產生的問題描述：Promise 如何返回值，而不是返回 Promise 對象。實際開發中使用封裝好的異步請求函數，為什么調用該函數返回的值一直都是 undefined。

一、需求

定義一個 foo 函數，在里面執行異步操作，然后取得 Promise.then 中的值並 return 出來，以便在別的地方使用該返回值。

該需求可以用偽代碼表示如下：

function foo() {
  // 執行異步操作得到 "hello world!" 字符串，並 return 出去
}

result = foo()
console.log(result)  // 預期結果：打印出 "hello world!"

二、遇到的問題

1. 返回 undefined

問題代碼

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. 沒有返回正確的值

問題代碼：

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)  // [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 異步請求結果給變量。

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