Simple uses of Promise, Async, Await

First let’s look at a traditional program execution order

function one() {
        return "i am one";
    }
    function two() {
      return "i am two";
    }
    function three() {
      return "i am three";
    }
    function run() {
      console.log(one());
      console.log(two());
      console.log(three());
    }
run();
  // i am one
  // i am two
  // i am three

Copy the code

Because the program is relatively simple, do not see the asynchronous request process, now we modify the program to simulate the asynchronous process

function one() {
        return "i am one";
  }
  function two() {
    setTimeout(() = > {
      return "i am two";
    }, 3000);
  }
  function three() {
    return "i am three";
  }
  function run() {
    console.log(one());
    console.log(two());
    console.log(three());
  }
run();
// i am one
// undefined
// i am three
Copy the code

Two () returns undefined because two() contains a setTimeout() method, which adds a condition for two() to be executed after 3 seconds. However, our program is asynchronous, and three() does not wait for two() to execute. So you have undefined

In our actual development, we will encounter the situation that the later program needs to wait for the previous program to be executed, so what method can make three() wait for two() to be executed?

We’ll just change our program from asynchronous to synchronous, and now we need to use our Promise object

  function one() {
    return "i am one";
  }
  function two() {
    return new Promise((resolve, reject) = > {
      setTimeout(() = > {
        resolve("i am two");
      }, 3000);
    });
  }
  function three() {
    return "i am three";
  }
  function run() {
    console.log(one());
    console.log(two());
    console.log(three());
  }
  run();
  // i am one
  // Promise {
      
       }
      
  // i am three
Copy the code

Resolve is a successful request, reject is a failed request

The result of the program, two(), returns a Promis object, which is in a pending state, indicating that the thing is still pending and the final result is not available

Since we call two() again without declaring that we need to wait for two() to finish executing, it’s a padding state

      function one() {
        return "i am one";
      }
      function two() {
        return new Promise((resolve, reject) = > {
          setTimeout(() = > {
            resolve("i am two");
          }, 3000);
        });
      }
      function three() {
        return "i am three";
      }
      async function run() {
        console.log(one());
        console.log(await two());
        console.log(three());
      }
      run();
      // i am one
      / /... After three seconds (not printed, just to help understand)
      // i am two
      // i am three
Copy the code

Async is short for async, async is a declaration that a function is asynchronous

‘await’ means to wait. Async functions need to wait for an await function to complete and return a result (a Promise object) before continuing to execute the following code. Await accomplishes synchronization by returning a Promise object

Summary: Async function means that there may be an asynchronous method inside the function, await followed by an expression. When async method is executed, it will execute the expression immediately when it meets await, and then put the code behind the expression into the microtask queue, so that the execution stack is released for synchronous code to execute first.

Here’s another simple example to make sense of async and await

async function async1(){
   console.log('async1 start');  / / 2
    await async2();
    console.log('async1 end')   / / 5
}
async function async2(){
    console.log('async2')  / / 3
}

console.log('script start');   / / 1
async1();
console.log('script end')  / / 4


// Output sequence:

->script start
->async1 start
->async2
->script end
->async1 end
Copy the code

To put it simply, after an expression is await, the code following the expression is executed last

Here’s another example

 async function async1() {
        console.log("async1 start"); / / 2
        await async2();
        console.log("async1 end"); / / 9
  }
  async function async2() {
    console.log("async2 start"); / / 3
    await async3();
    console.log("async2 end"); / / 8
  }
  async function async3() {
    console.log("async3 start"); / / 4
    await async4();
    console.log("async3 end"); / / 7
  }
  async function async4() {
    console.log("async4"); / / 5
  }

  console.log("script start"); / / 1
  async1();
  console.log("script end"); / / 6

    // script start
    // async1 start
    // async2 start
    // async3 start
    // async4
    // script end
    // async3 end
    // async2 end
    // async1 end
  
Copy the code

If you don’t understand, you can look at the figure below, the code after await expression is put in a queue, advanced after out, so the preceding is executed after