仅在第一个功能完全完成后才运行第二个功能

Question

大家好，我有这样的问题， 我有 2 个异步函数。 我只想在第一个完全结束后，运行第二个。 这就是我尝试做的：

  run2functions = async () => {
    await firstFunc();
    await secondFunc();
  };
  
  firstFunc = () => {
    console.log("first one");
    //Api code for information from any server

 }
 
  secondFunc = () => {
    console.log("second one");
    //Api code for information from any server

 }
 
 run2functions();

但它并不总是有效，有时第二个函数的代码在第一个函数的代码之前运行，我不知道为什么，我使用await强制第二个函数仅在第一个函数结束之后运行。

我只想现在结束第一个功能来激活第二个功能。

Answer 1

使

async

成为

await

可用的函数（返回 Promise）

// DEMO ONLY Just a helper to wait some ms time and return a Promise
const wait = (t) => new Promise((r) => setTimeout(r, t)); 

const firstFunc = async () => {
  await wait(1000); // Just to fake some wait time
  console.log("first one");
}

const secondFunc = () => { // This does not need to be async
  console.log("second one");
}

const run2functions = async() => {
  await firstFunc();  // Await for this one
  secondFunc();       // You don't need to await for this one
};

run2functions();

将导致：

(waiting 1 sec....)   
"first one"
"second one"

如果您正在等待两个响应（即：一个函数需要 3 秒才能解析，另一个函数需要 2 秒才能解析）：
使用 Promise.all

// DEMO ONLY Just a helper to wait some ms time and return a Promise
const fakeFetch = (time, data) => new Promise((res, rej) => setTimeout(res, time, data)); 

// Functions that return a Promise (just like JS's fetch());
const one = () => fakeFetch( 3000, {message:"First!"} );
const two = () => fakeFetch( 2000, {message:"Second!"} );

Promise.all([one(), two()]).then((values) => {
  // After 5 sec...
  console.log(values); // In the exact order as the functions calls array
});

上述的

一个现实世界的例子就像：

const getJSON = (url) => fetch(url).then(res => res.json()); // Returns a Promise
Promise.all([getJSON("users.json"), getJSON("tasks.json")]).then((JSONs) => {
  // After some unknown time... Both fetch Promises are resolved.  
  // Do some work with both JSON data:
  console.log(JSONs); // In the exact order as the functions calls array
});

Answer 2

Async/await 仅适用于返回

Promise

的函数。所以你的代码应该看起来像这样：

const run2functions = async () => {
  await firstFunc();
  await secondFunc();
};

const firstFunc = () => {
  return new Promise((res) => {
    // your async code here
    console.log("first one");
    resolve(res);
  });
};

const secondFunc = () => {
  return new Promise((res) => {
    // your async code here
    console.log("second one");
    resolve(res);
  });
};

await run2functions();

其他资源

• 异步/等待：https://javascript.info/async-await
• 承诺：https://javascript.info/promise-basics

Answer 3

如果函数一没有显式返回承诺，并运行一些异步代码，您可能会遇到您所描述的情况。

您可以通过两种形式解决这个问题：

1 - 使

firstFunc

异步并使其仅在所有代码运行后完成

const firstFunc = async () => {
  await getApiResponse();
  ...
}

2 - 让firstFunc返回一个Promise，这将使你的主函数在继续之前正确等待它

const firstFunc = () => {
  return getApiResponse();
}

Answer 4

异步函数 range(){

let amp = new Promise(function(resolve,reject){
    setTimeout(function(){
        console.log("First Promise");
    },2000);
 });


let volt = new Promise(function(resolve,reject){
    setTimeout(function(){
        console.log("Second Promise");
    },3000);
});

let a = await amp;
let v = await volt;

return[a,v];

}

兰戈（）；

Answer 5

function run2functions() {
    firstFunc(secondFunc);
}

function firstFunc(cb) {
    setTimeout(() => {
    },1000);
    cb();
    console.log("first one");
}

function secondFunc() {
    setTimeout(() => {
        console.log("second one");
    },1000);
}
 
run2functions();

我已经使用回调函数进行异步操作。我在firstFunct和secondFunct中都使用了setTimeOut函数来证明我的观点，即secondFunct仅在firstFunct完成执行后才执行。 我希望这有帮助......