await上下行的执行时机

最近用vue写项目，在生命周期created中请求后端接口，但是有时候某些后端接口是依赖其他接口成功请求的。于是就有了这样的代码。

为了更好的理解，写了一个小demo来分析这部分。

const time1 = () => {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve('time1')
      console.log('time1')
    }, 3000)
  }) 
}

const time2 = () => {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve('time2')
      console.log('time2')
    }, 1000)
  }) 
}

const time3 = () => {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve('time3')
      console.log('time3')
    }, 1000)
  }) 
}

// time3会在time2执行完毕之后执行，不一定是在time1之后。而time1的执行时机只与本身的时机有关。
// async function testDemo () {
//   time1()
//   await time2()
//   time3()
// }

// 为了使time3在time1以及time2执行完毕之后执行，不能直接使用await time1()。应采用Promise.all([promise]),此方法同样返回一个promise实例。
async function testDemo () {
  await Promise.all([time1(), time2()])
  time3()
}

testDemo()

另外，在使用webpack运行webpack-dev-server时，报了一个错误。

但是其实我已经配置了babel。也已经加了@babel/preset-env。 这是webpack.common.js中的原配置：

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env', '@babel/preset-react'],
                  plugins: ['@babel/plugin-transform-runtime']
                },
              }
            ],
        }
    ]
}

谷歌了下，修改了下配置：

module: {
    rules: [
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [[
                '@babel/preset-env',
                // 将这里写成数组形式，并添加下面这个对象，可以使得async/await语法成功运行
                {
                  "targets": {
                    "node": "10"
                  }
                }
              ], '@babel/preset-react'],
              // 使用这个插件，主要是为了不再使用babel-polyfill,因为babel-polyfill会污染全局对象。
              plugins: ['@babel/plugin-transform-runtime']
            },
          }
        ],
    ]
}

主要是将@babel/preset-env改成了数组形式，并添加一个对象{"target": {"node": "10"}}。有的说安装@babel/runtime即可，这种方法没有试，暂且记下。