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

为了将promises数组转换为数组的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的回调中返回的承诺，并将对.then的下一次调用求值为您的代码所需的源数组。

使用Bluebird之类的承诺库，您可以使用Promise.map来提高可读性。

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

如何从ES6承诺中获取原始数组

1 个答案: