js中的异步处理

阅读本文您将了解js中异步函数处理方式的发展

1. Promise.then
2. 使用生成器函数处理
3. 使用async 函数 场景：从服务器获取数据后利用获取到的数据再次发送网络请求。首先写一段代码模拟网络请求获取数据

function getData(data) {
  return new Promise((res) => {
    setTimeout(() => {
      res(data)
    }, 1000);
  })
}

调用getData后一秒即可获得数据

1. Promise.then

调用一次

getData('aaa').then(res => {
  console.log(res)
})
// 'aaa'

调用两次并利用上一次调用的结果再次发起请求

getData('aaa').then(res => {
  getData(res + 'bbb').then(res => {
    console.log(res)
  })
})
//'aaabbb'

两秒后拿到了结果，但是这种写法多次请求后会出现回调地狱的情况

2. 使用生成器解决回调地狱

这里就不多介绍生成器函数的用法了，详细的用法可以阅读迭代器和生成器 - JavaScript | MDN (mozilla.org)

利用生成器函数处理上面的两次请求

function* generate() { //生成器函数
  const res1 = yield getData('aaa') // res1 的值为第二次调用next传入的值
  const res2 = yield getData(res1 + 'bbb')//res2 为第三次调用next传入的值
  console.log(res2)
}

//自动调用 生成函数的迭代器
function execute(generate) {//传入一个生成器函数
  const gen = generate()//获得返回的迭代器
  function exec(data) {
    let result = gen.next(data)//利用next 将值传入到生成器函数中 第一次为undefined 
    if (result.done) { //迭代结束 直接return
      return 
    }
    result.value.then(res => { //result.value 为上面的getData的返回值<promise>
      exec(res)//递归调用
    })
  }
  exec()
}

execute(generate)

//'aaabbb'

3. 使用async函数

async function get() {
  const res1 = await getData('aaa')
  const res2 = await getData(res1 + 'bbb')
  console.log(res2)
}
get()
// 'aaabbb'