javascript - 如何从 ES6 Promises 获取原始数组

Question

我正在尝试使用 ES6 Promise 和 Fetch API 将 glsl 脚本加载为字符串。我认为我有一个非常优雅的解决方案来获取顶点和片段着色器并使用 twgl.js 创建一个新的 programInfo

Promise.all([fetch(vert_url),fetch(frag_url))])
       .then((responses) => responses.map((response) => response.text()))
       .then((sources) => this.programInfo = twgl.createProgramInfo(gl, sources));

问题是 response.text() 似乎返回的是 Promise 而不是原始字符串。在 twgl.createProgramInfo() 中，它通过映射运行源代码，然后尝试对结果运行 indexOf。

function createProgramInfo(gl, shaderSources, ...) {
    ...
    shaderSources = shaderSources.map(function (source) {
      // Lets assume if there is no \n it's an id
      if (source.indexOf("\n") < 0) {
      ...

Chrome 在最后一行抛出 javascript 错误:

Uncaught (in promise) TypeError: source.indexOf is not a function

我似乎无法弄清楚如何将 sources 转换为真正的字符串。有人知道如何让它工作吗？

注意:这实际上是在使用 create-react-app 创建的 React 应用程序中，这意味着 webpack 和 babel 被用来从 jsx 转换它。

Answer 1

为了将 promise 数组转换为数组 promise ，请使用 Promise.all :

Promise.all([fetch(vert_url), fetch(frag_url)])
       .then(responses => Promise.all(responses.map(response => response.text())))
       .then(sources => this.programInfo = twgl.createProgramInfo(gl, sources));

Promise#then将评估您在 Promise.all 的回调中返回的 promise ，并将对 .then 的下一次调用评估为源数组，这是您的代码所期望的.

---

使用类似 Bluebird 的 promise 库, 你可以使用 Promise.map为了使它更具可读性。

Promise.all([fetch(vert_url), fetch(frag_url)])
       .map(response => response.text())
       .then(sources => this.programInfo = twgl.createProgramInfo(gl, sources));