至于你的评论；我将其添加为答案。

您用 JavaScript 编写的代码在一个线程上运行，这意味着如果您的代码实际上可以等待某些东西，它将阻止您执行任何其他代码。JavaScript 的事件循环在这个视频中得到了很好的解释，如果你喜欢阅读这个页面。

在浏览器中阻止代码的一个很好的例子是alert("cannot do anything until you click ok");. 警报会阻止所有内容，用户甚至无法滚动或单击页面中的任何内容，您的代码也会阻止执行。

Promise.resolve(22)
.then(x=>alert("blocking")||"Hello World")
.then(
  x=>console.log(
    "does not resolve untill you click ok on the alert:",
    x
  )
);

在控制台中运行它，你就会明白我所说的阻塞是什么意思。

当您想做一些需要时间的事情时，这会产生问题。在其他框架中，您会使用线程或进程，但 JavaScript 中没有这样的东西（从技术上讲，节点中有 web worker 和 fork，但这是另一回事，通常比使用异步 api 复杂得多）。

因此，当您想发出 http 请求时，您可以使用，fetch但 fetch 需要一些时间才能完成，并且您的函数不应阻塞（必须尽快返回某些内容）。这就是 fetch 返回一个 promise 的原因。

请注意，fetch 是由浏览器/节点实现的，并且确实在另一个线程中运行，只有您编写的代码在一个线程中运行，因此开始很多Promise，只运行您编写的代码不会加快任何速度，但会并行调用本机异步 api。

在 promise 之前异步代码使用回调或返回一个可观察对象（如 XmlHttpRequest），但让我们介绍一下 promise，因为无论如何您都可以将更传统的代码转换为 promise。

promise 是一个具有then函数的对象（以及一堆为 then 做同样的事情），这个函数需要 2 个参数。

1. 解析处理程序：当Promise解决（没有错误并完成）时，Promise将调用的函数。该函数将传递一个带有解析值的参数（对于 http 请求，这通常是响应）。
2. 拒绝处理程序：当Promise拒绝（有错误）时由Promise调用的函数。这个函数将被传递一个参数，这通常是错误或拒绝的原因（可以是字符串、数字或任何东西）。

将回调转换为Promise。

传统的 api（尤其是 nodejs api）使用回调：

traditionalApi(
  arg
  ,function callback(err,value){ 
    err ? handleFail(err) : processValue(value);
  }
);

这使得程序员很难以线性方式（从上到下）捕获错误或处理返回值。尝试与错误处理并行或节流并行处理事情变得更加不可能（无法阅读）。

您可以将传统的 api 转换为Promise new Promise

const apiAsPromise = arg =>
  new Promise(
    (resolve,reject)=>
      traditionalApi(
        arg,
        (err,val) => (err) ? reject(err) : resolve(val)
      )
  )

异步等待

这就是所谓的 promise 的语法糖。它使 Promise 消费函数看起来更传统且更易于阅读。也就是说，如果您喜欢编写传统代码，我认为组合小函数更容易阅读。例如，你能猜出这是做什么的吗？：

const handleSearch = search =>
  compose([
    showLoading,
    makeSearchRequest,
    processRespose,
    hideLoading
  ])(search)
  .then(
    undefined,//don't care about the resolve
    compose([
      showError,
      hideLoading
    ])
  );

无论如何; 足够的咆哮。重要的部分是要了解async await实际上并没有启动另一个线程，async函数总是返回一个Promise并且await实际上并没有阻塞或等待。它是语法糖someFn().then(result=>...,error=>...)，看起来像：

async someMethod = () =>
  //syntax sugar for:
  //return someFn().then(result=>...,error=>...)
  try{
    const result = await someFn();
    ...
   }catch(error){
     ...
   }
}

示例始终显示，try catch但您不需要这样做，例如：

var alwaysReject = async () => { throw "Always returns rejected promise"; };
alwaysReject()
.then(
  x=>console.log("never happens, doesn't resolve")
  ,err=>console.warn("got rejected:",err)
);

抛出的任何错误或await返回被拒绝的Promise都会导致异步函数返回被拒绝的Promise（除非您尝试捕获它）。很多时候希望让它失败并让调用者处理错误。

当您希望Promise成功并为被拒绝的Promise设置特殊值时可能需要捕获错误，以便您可以稍后处理它，但Promise在技术上不会拒绝，因此将始终解决。

一个例子是Promise.all，这需要一个Promise数组并返回一个新的Promise，该Promise解析为一组已解析的值或在其中任何一个拒绝时拒绝。您可能只想获取所有Promise的结果并过滤掉被拒绝的结果：

const Fail = function(details){this.details=details;},
isFail = item => (item && item.constructor)===Fail;
Promise.all(
  urls.map(//map array of urls to array of promises that don't reject
    url =>
      fetch(url)
      .then(
        undefined,//do not handle resolve yet
        //when you handle the reject this ".then" will return
        //  a promise that RESOLVES to the value returned below (new Fail([url,err]))
        err=>new Fail([url,err])
      )
  )
)
.then(
  responses => {
    console.log("failed requests:");
    console.log(
      responses.filter(//only Fail type
        isFail
      )
    );
    console.log("resolved requests:");
    console.log(
      responses.filter(//anything not Fail type
        response=>!isFail(response)
      )
    );
  }
);

您的问题和评论表明您可以对事件循环的工作方式稍加直觉。一开始真的很困惑，但过了一段时间它就变成了第二天性。

与其考虑 FINAL VALUE，不如考虑这样一个事实，即您只有一个线程并且无法停止它——因此您需要 FUTURE VALUE——下一个或某个未来事件循环中的值。一切你写的是不是异步将会几乎立即发生-功能与一些值或未定义返回立即。你无能为力。当您需要异步操作时，您需要设置一个系统，以便在异步值在未来某个时间返回时处理它们。这就是事件、回调、promise（和 async/await）都试图帮助解决的问题。如果某些数据是异步的，您就不能在同一个事件循环中使用它。

所以你会怎么做？

如果您想要一个模式，您可以在其中创建一个实例，调用init()然后进一步处理它的一些函数，您只需要设置一个系统，在数据到达时进行处理。有很多方法可以做到这一点。这是您class变化的一种方式：

function someAsync() {
  console.log("someAsync called")
  return new Promise(resolve => {
    setTimeout(() => resolve(Math.random()), 1000)
  })
}

class Posts {
  constructor(url) {
    this.ready = false
    this.data = "uninitilized"
    this.url = url
  }
  init() {
    this.data = someAsync()

  }
  time100() {
    // it's important to return the promise here
    return this.data.then(d => d * 100)
  }
}

let p = new Posts()
p.init()
processData(p)
// called twice to illustrate point
processData(p)

async function processData(posts) {
  let p = await posts.time100()
  console.log("randomin * 100:", p)
}

init()保存从someAsync(). someAsync()可以是任何返回Promise的东西。它将Promise保存在实例属性中。现在您可以调用then()或使用 async/await 来获取值。如果Promise已经解决，它将立即返回该值，或者在解决后处理它。我打了processData(p)两次电话只是为了说明它没有someAsync()打过两次电话。

那只是一种模式。还有更多——使用事件、可观察对象、直接使用then()，甚至是不流行但仍然有用的回调。

注意：无论您await在哪里使用它，都必须在async函数内部。

查看更新的 FIDDLE

您需要使用await myFunc()来获取您期望的值，getPostById因为异步函数总是返回一个Promise。

这有时非常令人沮丧，因为需要将整个链转换为async函数，但我猜这是将其转换为同步代码所要付出的代价。我不确定这是否可以避免，但我有兴趣听取对此有更多经验的人的意见。

通过复制函数然后访问final和 ，在您的控制台中尝试以下代码await final。

笔记：

异步函数CAN包含一个AWAIT表达。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

没有规则必须有 await 才能声明异步函数。下面的例子使用了一个没有 await 的异步函数，只是为了表明一个异步函数总是返回一个Promise。

const sample = async () => {
  return 100;
}

// sample() WILL RETURN A PROMISE AND NOT 100
// await sample() WILL RETURN 100

const init = async (num) => {
  return new Promise((resolve, reject) => {
    resolve(num);
  });
}

const myFunc = async (num) => {
  const k = await init(num);
  return k;
}

// const final = myFunc();
// final; This returns a promise
// await final; This returns the number you provided to myFunc