Promise,async,await

时间:2019-11-18
本文章向大家介绍Promise,async,await,主要包括Promise,async,await使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
  1. 普通的Promise
      <script>
        function t1(resolve, reject) {
          return new Promise(function (resolve, reject) {
            setTimeout(() => {
              console.log('1s执行')
              resolve('code:200 1s')
            }, 1000)
          });
        }
        function t2(resolve, reject) {
          return new Promise(function (resolve, reject) {
            setTimeout(() => {
              console.log('2s执行')
              resolve('code:200 2s')
            }, 2000)
          });
        }
    
        var p = new Promise(function (resolve, reject) {
          console.log('开始');
          resolve(123);
        });
        p.then(t2)
          .then(t1)
          .then(res => {
            console.log(res)
          })
        //执行打印顺序
        //开始
        //2s执行
        //1s执行
        //code:200 1s
    View Code
  2. Promise all
        Promise.all([t1(),t2()]).then(res=>{
          console.log(res)
        })
        //执行打印顺序
        //1s执行
        //2s执行
        //["code:200 1s", "code:200 2s"]
     
  3. Promise race
        Promise.race([t1(),t2()]).then(res=>{
          console.log(res)
        }).catch(res=>{
          console.log('reject')
        })
        //执行打印顺序
        //1s执行
        //code:200 1s
        //2s执行
  4. async+await 串行执行
      async function asyncAwaitFn(str) {
        return await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(str)
            }, 1000);
        })
    }
    
    const test = async () => { //串行执行
        console.time('test')
        console.log(await asyncAwaitFn('执行1')); //执行1
        console.log(await asyncAwaitFn('执行1')); //执行2
        console.timeEnd('test') //test: 2004.552978515625ms
    }
    
    test();
  5. async+await 并行执行
      async function asyncAwaitFn(str) {
        return await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(str)
            }, 1000);
        })
    }
    
    const test = async () => { //并行执行
        console.time('test')
         const parallelOne = asyncAwaitFn('执行1');
         const parallelTwo = asyncAwaitFn('执行2')
    
         console.log(await parallelOne) //执行1
         console.log(await parallelTwo) //执行1
         console.timeEnd('test') //test: 1002.541015625ms
    }
    
    test();

原文地址:https://www.cnblogs.com/tiger4513/p/11882368.html