1. 两个函数并行执行最简作法

const fun1 = () => {
  setTimeout(()=>{// 方便测函数的执行顺序
    console.log("fun1")
  }, 1000)
}

const fun2 = () => {
  setTimeout(()=>{
    console.log("fun2")
  }, 100)
}

setTimeout(fun1)
setTimeout(fun2)

依次打印 fun2 fun1
在函数内部写计时器是为了便于测函数的执行顺序

2. 两个函数并行执行后再去执行其他操作

Promise

const fun1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('f1')
    resolve("1")
  }, 1000)
})

const fun2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('f2')
    reject('2')
  }, 800)
})

Promise.all([fun1, fun2]).then(values => {
  console.log('resolve', values)
}, values=>{
 console.log('reject', values)
})

// 打印顺序依次是f2, reject 2, f1
有一个函数返回了reject, 则 then 的第二个函数会被调用，
仅当两个函数都 resolve 时，then 的第一个函数会被调用，values代表状态下的参数

var p = Promise.all([1,2,3]);
var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
var p3 = Promise.all([1,2,3, Promise.reject(555)]);

setTimeout(function(){
    console.log(p);
    console.log(p2);
    console.log(p3);
});

// 结果
Promise { [ 1, 2, 3 ] }
Promise { [ 1, 2, 3, 444 ] }
Promise { <rejected> 555 }

// 若去掉setTimeout 
Promise { <pending> }
Promise { <pending> }
Promise { <pending> }

在setTimeout 内部执行的是异步代码，可以等到函数准备好后，再获取执行环境。

Generator

const fun1 = () => {
  console.log('fun1')
  return '1'
}

const fun2 = () => {
  console.log('fun2')
  return '2'
}

function* gen(fun1, fun2, fun3) {
  yield fun1()
  yield fun2()

  return 'done!'
}

const g = gen(fun1, fun2)
console.log(g.next()) // fun1 { value: '1', done: false }
接着再执行
console.log(g.next()) // fun2 { value: '2', done: false }

若同时打印，则f1, f2均异步，完成顺序因函数本身而定

async

const fun1 = () => {
  console.log('fun1')
  return 1
}

const fun2 = () => {
  console.log('fun2')
  return 2
}

async function handle(fun1, fun2) {
  const a = await fun1()
  const b = await fun2()
  console.log(a + b)
  return a
}

handle(fun1, fun2).then(value => {
  console.log(value)
})
打印顺序：fun1 fun2 3 1

捕获错误

const fun1 = () => {
  return new Promise((resolve, reject)=>{
    reject("error")
  })
  // throw 'oh, no'
}

const fun2 = () => {
  console.log('fun2')
  return 2
}

async function handle(fun1, fun2) {
  const a = await fun1()
  .catch(err => {
    console.log("a",err)
  })
  const b = await fun2()
  console.log(a, b)
  return "done"
}

handle(fun1, fun2).then(
  value => {
    console.log('resolve', value)
  },
  value => {
    console.log('reject', value)
  }
)
// 打印顺序：
a error
fun2
undefined 2
resolve done

若将a 对应函数后的catch 去掉, 则打印
reject error
错误经捕获后，执行 then 参数中第一个回调函数