1. What is it for

  • Generate asynchrony, wait for asynchrony to complete, realize the flattening of asynchronous code ~

  • Async returns a Promise object. If a function returns an immediate Promise, async encapsulates the immediate Promise with promise.resolve ().

    async function asyncDemo1() {
        return 'generate a new Promise';
    }

    asyncDemo1().then(res= > {
        console.log(res);
    });
Copy the code

The above is actually equivalent to:

    function promiseDemo1() {
        return new Promise((resolve, reject) = > {
            resolve('generate a new Promise');
        });
        / / or
        // return Promise.resolve('generate a new Promise');
    }
    promiseDemo1().then(res= > {
        console.log(res);
    })
Copy the code

2. Basic usage

    async function asyncDemo1() {
        return 'generate a new Promise';
    }
    Return generate a new Promise, similar to using Promise then ~
    await asyncDemo1();
Copy the code

3. How to understand

(1) async means asynchronous, ‘await’ means waiting, async means declaring an asynchronous function, and ‘await’ means waiting for the completion of an asynchronous function;

Await must be written in async functions; Async functions can be executed in any function;Copy the code

(2) There may be await expressions in async functions. When async functions are executed, if they encounter await expressions, the execution will be suspended first. After the triggered asynchronous operation is completed, the execution of async functions will be resumed and parsing values will be returned.

What will be printed in the following codeasync function genAsy() {
    console.log(1);
    return new Promise((resolve, reject) = > {
        console.log(2);
        //resolve(3);
    }).then(res= > {
        console.log(3);
    });
}
await genAsy();
console.log(4); What will be printed in the following codeasync function genAsy() {
    console.log(1);
    return new Promise((resolve, reject) = > {
        console.log(2);
        //resolve(3);
    }).then(res= > {
        console.log(3);
    });
}
genAsy();
console.log(4);
Copy the code

Indicates that await will indeed wait for the asynchronous function to complete before executing the next step ~

(3) processing of await for different expressions:

  • Promise object: Await suspends execution, waits for the Promise object resolve, then resumes execution of the async function and returns the parse value.
  • Non-promise objects: return the corresponding value directly.
async function asyncDemo() {
    return 1;
}
let asyncDemoRes = await asyncDemo();
console.log(asyncDemoRes, asyncDemoRes);
Copy the code

4. How to handle exceptions

  • Using a try… catch
async function genAsy() {
    return new Promise((resolve, reject) = > {
        resolve(3);
    }).then(res= > {
        tetst
        console.log(3);
    });
}
try {
    await genAsy();
} catch(err) {
    console.log(err)
}
Copy the code
  • Encapsulation library

reference

  /** * wrap a promise to return a uniform error format *@param {Promise} promise 
   */
  function to (promise) {
    return promise.then(res= > [null, res]).catch(err= > [err])
  }
  const [err, res] = await to(genAsy())
  if (err) {
    console.error('touser err:', err)
  }
Copy the code

5, how to parallel processing

async function fetchParallel () {
  return {
    name: await genAsy(),
    avatar: await genAsy() 
  }
}
Copy the code
  • Promise.all
Promise.all([
    genAsy(),
    genAsy()
]);
Copy the code

End of 6,

That’s the basic usage of async/await and how to get into it, as well as how to do error handling and parallelism.