如何同步获取响应和异步请求？

Question

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
outArr = [];

var fetchData = async (str) => {

    var b = await fetch('http://api.mathjs.org/v4/?expr=' + str);
    var c = await b.json();

    console.log(c)

}

function abc(arr) {

    len = arr.length;

    for (let i = 0; i < len; i++) {
        var str = i + '*' + i;
        fetchData(str);

    }

}


console.log(abc(arr));

能否请您告诉我如何同步获取http请求的响应并异步击中请求？

预期产量

[1、4、9、16、25、36、49、64、81、100]

我尝试了async和 await ，但仍然得到异步响应。

我们可以使用promises吗？如何使用synchronously和Promise获得响应。

我收到了这个回复

Answer 1

您无法使任何异步同步-最好的方法是使abc async和await每次迭代。 （那是如果您不想一次发出所有请求-如果可以一次发出所有请求，请改用Promise.all）

您还应注意不要像使用outArr和len那样隐式创建全局变量。

以下是使用await的方法：

const fetchData = async (str) => {
  const b = await fetch('https://api.mathjs.org/v4/?expr=' + str);
  return b.json();
}
async function abc() {
  const output = [];
  for (const i of Array.from({ length: 10 }, (_, i) => i + 1)) {
    const str = i + '*' + i;
    const result = await fetchData(str);
    output.push(result);
  }
  return output;
}
abc()
  .then(output => {
    console.log(output);
  });

（mathjs的证书有问题，因此您可能需要在浏览器中添加一个例外，以使代码段起作用）

Answer 2

使用索引作为第一个参数。调用fetchData，如下所示：

fetchData(index, expr);

在fetchData中，用api调用的结果填充数组

outArr[index] = c;

打印结果或outArr！

const  arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const outArr = [];
let count = 0;

const fetchData = async (i, str) => {
  var b = await fetch("https://api.mathjs.org/v4/?expr=" + str);
  var c = await b.json();
  outArr[i] = c;
  count++
  if (count === arr.length) {
    console.log(outArr);
  }
};

function compute(arr) {
  len = arr.length;

  for (let i = 0; i < len; i++) {
    var str = i + "*" + i;
    fetchData(i, str);
  }
}

compute(arr);