四种方式实现js异步编程

要求

使用回调、Promise、generator和asnyc/await四种方式，请求api/data中的数据

为方便理解，首先封装了一个库去实现ajax的get方法，调用方式如下

http.get('api/data', callback)

但是如果以同步的方式来写，如

function getData (url) {
  return http.get(url)
}
const data = getData('api/data');
console.log(data) // undefined

结果报错了，这是因为http.get(url)本身是个异步（非阻塞）的过程，这行代码运行的时候并没有马上得到结果，它的结果出现时间与服务器有关，是无法预知的。js会把它放到异步线程然后继续运行下去，下一行打印它自然是undefined。

所以才有了接下来的讨论，采用异步的方式去获取它的结果。

回调（callback）

function getData (url, callback) {
  http.getData(url, data => {
    if (data.status == 200) {
      // let err = null
      // callback(err, data);

      callback(null, data);

    } else {
      // let err = data
      // callback(err, data);

      callback(data);

    }
  });
}

getData('api/data', (err, data) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

Promise

Promise对象代表一个未完成、但预计将来会完成的操作，有三种状态：

pending：初始值，不是fulfilled，也不是rejected
resolved(也叫fulfilled）：代表操作成功
rejected：代表操作失败

整个promise的状态只支持两种转换：从pending转变为resolved，或从pending转变为rejected，一旦转化发生就会保持这种状态，不可以再发生变化，状态发生变化后会触发then方法。

function getData (url) {
  return new Promise((resolve, reject) => {
    http.get(url, data => {
      if (data.status == 200) {
        resolve(data);
      } else {
        reject(data);
      }
    });
  })
}

getData('api/data').then(data => {
  console.log(data);
}).catch(err => {
  console.log(err);
})

拓展：
Promise还有一个Promise.all()方法，当我们需要请求多个接口的数据时，可以这么用

function getData (url, callback) {
  http.get(url, data => {
    if (data.status == 200) {
      callback(null, data);
    } else {
      callback(data);
    }
  });
}

const ansycTask = {
  getData('data/api1', (err, data) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
      return data
    }
  },
  getData('data/api2', (err, data) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
      return data
    }
  },
  getData('data/api3', (err, data) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
      return data
    }
  }
}

Promise.all(asyncTask).then(data => {
  console.log(data)
})

全部请求得到返回后，会返回一个由3个data组成的数组，并且是按请求顺序排列的。

generator

相当于Promise的升级，可以手动控制Promise的进行

function getData (url) {
  return new Promise((resolve, reject) => {
    http.get(url, data => {
      if (data.status == 200) {
        resolve(data);
      } else {
        reject(data);
      }
    });
  })
}

function *getDataGen (url) {
  yield getData(url);
  yield () => {
    console.log('end')
  }
}

const task = getDataGen('api/data');
task.next(); // 打印data
task next(); // 打印'end'

generator里面可以使用yield关键字来表示暂停，它接收一个promise对象，返回promise的结果并且停在此处等待，不是一次性执行完。

async/await

async/await是ES7新特性，必须配合使用，在function前加上async，然后在需要等待结果的代码前面加上await，函数将在await的那个东西取得结果后再赋值，可以和Promise配合使用。

function getDataPromise (url) {
  return new Promise((resolve, reject) => {
    http.get(url, data => {
      if (data.status == 200) {
        resolve(data);
      } else {
        reject(data);
      }
    });
  })
}

async function getData(url) {
  await getDataPromise(url);
}

const data = await getData('data/api');