es6异步变同步(让for循环规规矩矩的走完)

要用到ES6的 Pormise函数和async/await函数；
首先了解一下什么是 Pormise函数和async/await函数

1. Pormise函数简单的说就是用来处理异步操作的，可以让我们写异步调用的时候写起来更加优雅，更加美观便于阅读。 可以参考Promise 详情讲解

2. async/await函数 是声明异步函数 可参考async/await详解

什么时候用到呢？

1. 回调地狱(调接口的时候连续套四五层，这是很恐怖的事情);
2. 上一层逻辑没执行完不让走下一层逻辑

  // 成功执行就用resolve返回一个结果，
  // 如果执行失败则用reject返回结果*/
var Pro = new Promise(function (resolve, reject) {
    
    
     // 一段耗时间的代码,这里用定时器代替(一般用在请求接口)
     setTimeout(function () {
    
    

         // resolve 代表成功了，可以执行下面的代码了
         resolve('请继续执行 over');
     }, 1000)
 })

 Pro.then(function (res) {
    
    
     // 这里收到成功的回调了就可以写下面的代码了
     console.log(res);

 })

进阶

  function Pro(val) {
    
    
    return new Promise((resolve, reject) => {
    
    
      setTimeout(() => {
    
    
        resolve(console.log(val))
      }, 1000)
    })
  }

 /* 我们再来看看如何使用这个函数,
   下面有两种调用方式*/

 //第一种调用方式
  Pro('第一步')
  .then(Pro('第二步'))
  .then(Pro('第三步'))
  .then(Pro('第四步'))

 //第二种调用方式
  let res1 = Pro('第一步')
  let res2 = res1.then(Pro('第二步'))
  let res3 = res2.then(Pro('第三步'))
  let res4 = res3.then(Pro('第四步'))

让for循环规规矩矩的走完
for 循环 i 已经走到10了，但是 第一次循环逻辑还没走完，这样需要一次性等待多次循环的时间且无法中途取消。如何让for循环规规矩矩的走完？（Promise 和 async 配合使用）

function Pro(i) {
    
    
     return new Promise(function (resolve, reject) {
    
    
         // 一段耗时间的代码,这里用定时器代替

         setTimeout(function () {
    
    

             // resolve 代表成功了，可以执行下面的代码了
             resolve(`正在执行第${
      
      i}遍`);
         }, 1000)
     })
 }

 async function getData() {
    
    

     for (let i = 0; i < 20; i++) {
    
    
         let res = await Pro(i);
         console.log(res);
     }
 }

 getData()