javascript - 并行运行两个函数，然后在 javascript 中使用 prev 函数的结果调用另一个函数

Question

我的javascript代码..

function testdata(){
    var strtest_data='';
    var strtest1_data='';
    d3.json("js/test.json").then(function(test_json) {
        strtest_data=JSON.stringify(test_json);
       console.log(strtest_data); 
    })
    d3.json("js/test.json").then(function(test_json1) {
        strtest1_data=JSON.stringify(test_json1);
       console.log(strtest_data1); 
    })
     console.log(strtest_data); 
     var testobj=JSON.parse(strtest_data);
     var testobj1=JSON.parse(strtest_data1);
   
   console.log(JSON.stringify({data:testobj.quiz, more:testobj1.maths}));
}

在上面的代码中，我使用 d3.json 调用了两个函数（为了简洁起见，我调用了相同的 test.json），然后结果调用了另一个函数。这里的函数是 console.log 但在实际场景中可能是使用 fetch 的 ajax POST 调用。

上面的代码不起作用，因为代码的底部在 d3.json 完成之前运行..

我真诚地感谢任何帮助解决这个问题。

谢谢

标签： javascript

Answer 1

d3.json是异步方法，所以如果你想顺序调用它，使用async/await

async function testdata() {
  let strtest_data = ""
  let strtest1_data = ""

  const test_json = await d3.json("js/test.json")
  strtest_data = JSON.stringify(test_json)
  console.log(strtest_data)

  const test_json1 = await d3.json("js/test.json")
  strtest1_data = JSON.stringify(test_json1)
  console.log(strtest_data1)

  var testobj = JSON.parse(strtest_data)
  var testobj1 = JSON.parse(strtest_data1)

  console.log(JSON.stringify({ data: testobj.quiz, more: testobj1.maths }))
}

或同时使用Promise.all

async function testdata() {
  let strtest_data = ""
  let strtest1_data = ""

  const [test_json, test_json1] = await Promise.all([
    d3.json("js/test.json"),
    d3.json("js/test.json"),
  ])
  strtest_data = JSON.stringify(test_json)
  strtest1_data = JSON.stringify(test_json1)
  console.log(strtest_data)
  console.log(strtest_data1)

  var testobj = JSON.parse(strtest_data)
  var testobj1 = JSON.parse(strtest_data1)

  console.log(JSON.stringify({ data: testobj.quiz, more: testobj1.maths }))
}