Как получить Примитивный Массив от ES6 Promises

Question

Я пытаюсь загрузить сценарии glsl в виде строк, используя ES6 Promise и Fetch API. Я думал, что у меня есть довольно элегантное решение для получения вершинных и фрагментных шейдеров и создания новой программы Info с twgl.js

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 в реальные строки. У кого-нибудь есть идея, как заставить это работать?

Примечание. На самом деле это приложение React, созданное с использованием create-реагировать-приложение, что означает, что webpack и babel используются для переноса этого из jsx.

Answer 1

Чтобы преобразовать массив обещаний в обещание массива, используйте 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));